[CLOSED] MenuPanel Menu scrolling Arrows when scroll functionality is activated

  1. #1

    [CLOSED] MenuPanel Menu scrolling Arrows when scroll functionality is activated

    I've searched the forums and could not find a solution - there is a .userarrows property in tree but does not seem to apply to menu.

    I am trying to get rid of the arrows which show up in menus when scrolling is active
    (these arrows do not appear in our old EXT version 1.2 project)

    See image attached.
    Click image for larger version. 

Name:	MenuScrollNavArrows.png 
Views:	19 
Size:	10.1 KB 
ID:	25029
    Last edited by fabricio.murta; Jul 19, 2017 at 2:40 PM.
  2. #2
    Hello @AdvanceLoanTechnologies!

    Would you let us know what specific component you are talking about? Did you find (or look for) examples using that component in examples explorer so you could point us to it?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Fabricio, sorry if I did not include code or sample. I thought this might have been a simple/known issue.

    To use one of Ext examples https://examples4.ext.net/#/MessageB...tion/Overview/
    In this example, if you resize the "Notifications" window just a tad to make one of the menus overflow -
    you can see the up/down arrows appear as the scrolling is activated

    In addition if (on this same sample) you change the markup by adding to the <MENU> component the SCROLLABLE attribute (see below)
       <ext:MenuPanel runat="server" Title="Basic Align" SaveSelection="false">
                    <Menu runat="server" Scrollable="Vertical">
                        <Items>
    Then when resizing the window you can see this menu have both a scroll-bar and the up/down arrows appear.
    I wanted to know if there was a way to get rid of (hide) this 'default' functionality of showing the menu 'scroll-arrows'.
    I just need the scroll bars to show when overflow happens.

    Regards,
    Rafaelcjr
  4. #4
    Hello @Rafaelcjr!

    I'm afraid that this would require either an override or a css force-hide for the buttons.

    As for the latter approach, you could use this:

    <style type="text/css">
        .x-box-scroller-menu {
            display: none
        }
    
        .x-menu-body .x-box-scroller-body-vertical {
            margin-top: 0px
        }
    </style>
    As a third alternative, you can just drop the scrollable settings on the menu panel and menu, and wrap the whole <ext:MenuPanel /> in an <ext:Panel />, and using the panel scroll instead to see thru the whole menu. No scroller buttons would be added this way, at all.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thanks for your quick response,
    your CSS rule works like a charm -> Arrows gone.

    You can Mark this issue resolved/closed.
  6. #6
    Hello! Thanks for the feedback, glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] TabPanel or menu with bootstrap navbar functionality
    By HansWapenaar in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 22, 2016, 12:29 PM
  2. MenuPanel - Horizontal Scroll
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Aug 05, 2011, 2:45 PM
  3. Replies: 0
    Last Post: Jan 13, 2011, 10:55 AM
  4. Replies: 10
    Last Post: Jan 22, 2010, 4:08 PM
  5. Menu not disappearing when clicking in MenuPanel
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 30, 2009, 11:17 PM

Tags for this Thread

Posting Permissions