Re: menu no more accessible when too menu items (closed)

Post Reply
serenne
Posts: 53
Joined: 21 Jul 2015, 07:43

29 Jun 2018, 13:40

Hi Aragorn,
We have a problem when the menu is growing in terms of sub menu and menu items count : we miss something (like a scrollbar) to be able to scroll to make the latest items visible and of course accessible.
Do you have any nice solution (/ suggestions) to do this ?

Kindest regards
Philippe
Last edited by serenne on 19 Jul 2018, 13:35, edited 1 time in total.

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

02 Jul 2018, 08:29

Hi Philippe,

Which menu mode are you using?

Best Regards,

serenne
Posts: 53
Joined: 21 Jul 2015, 07:43

03 Jul 2018, 02:19

Hi Aragorn,
We are using a dynamic menu (pu:menu with a model)
having a look to the preview,it is the same as the defaultone (Static menu I think), but in fact in the preview there is a scrollbar I do not have.
All was inside a single <div class="nano">. I just changed it to <div class="nano has-scrollbar"> and I got effectively a scrollbar. But It does 'not scroll to the bottom

I think I found the reason : I have added a <div id="menu-footer"> after the <pu:menu> to add an image at the bottom
<h:form id="menuform">
<div class="layout-menu">
<div class="nano has-scrollbar">
<div class="nano-content menu-scroll-content">
<div class="profile></div>
<pu:menu widgetVar="mainMenu" model="#{sideMenuModel.model}" id="moduleMenu"/>
<div id="menu-footer">
...
#menu-footer {
position: absolute;
bottom: 80px;
left:10px;
}
If I remove it all works fine... but ( :oops: ) I need this image at the bottom . Any idea how to do that the best way ?

Kindest regards

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

06 Jul 2018, 09:25

Thanks a lot for the sample code. I'll check it and get back to you.

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

06 Jul 2018, 09:54

Could you please try the following css code?

Code: Select all

<style type="text/css">
        #menu-footer {
            position: relative;
            left:10px;
            padding-top: 20px;
            padding-bottom: 120px; /* for scrollbar */
        }
        
        body.layout-compact .layout-wrapper .layout-menu > .nano > .nano-content > ul.ultima-menu {
            margin-top: 14px;
        }

        .layout-wrapper .layout-menu > .nano > .nano-content > ul.ultima-menu {
            margin-top: 16px;
        }
    </style>

Code: Select all

    <h:form id="menuform"> 
        <div class="layout-menu">
            <div class="nano">
                <div class="nano-content menu-scroll-content">
                    <pu:menu widgetVar="me" ...>
                    </pu:menu>
                    
                    <div id="menu-footer">
                        TEST TEST TEST
                    </div>
                </div>
            </div>
        </div>
    </h:form>

serenne
Posts: 53
Joined: 21 Jul 2015, 07:43

16 Jul 2018, 13:15

Hi Aragorn,

works better, but the footer is still inside the scrollable part just after the menu items (and that way not at the bottom when items are not folded out) , and not at the bottom of the left side... :oops:

What I am trying to achieve is something like

| menu |
| items |
| | -> The scrollable Menu
| |
| |
|---------------|
| footer | (outside scrollable part, so always visible)

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

17 Jul 2018, 09:43

Please try;

Code: Select all

<style type="text/css">
    #menu-footer {
        padding-top: 20px;
        background-color: #3F51B5;
        color: white;
    }

    .layout-menu > .nano {
        height: calc(100% - 120px);
    }

    .layout-wrapper .layout-menu > .nano > .nano-content > ul:last-child {
        padding-bottom: 0px;
    }        
</style>

Code: Select all

<h:form id="menuform"> 
        <div class="layout-menu">
            <div class="nano">
                <div class="nano-content menu-scroll-content">
                    <pu:menu widgetVar="me" ...>
                    </pu:menu>
                </div>
            </div>
            
            <div id="menu-footer">
                        TEST TEST TEST
            </div>
        </div>
    </h:form>

serenne
Posts: 53
Joined: 21 Jul 2015, 07:43

19 Jul 2018, 13:34

Hi Aragorn
works like a charm !
Thanks a lot

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

20 Jul 2018, 10:49

Glad to hear, thanks a lot for the update!

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest