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
Re: menu no more accessible when too menu items (closed)
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi Philippe,
Which menu mode are you using?
Best Regards,
Which menu mode are you using?
Best Regards,
Github Profile: https://github.com/mertsincan
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 ( ) I need this image at the bottom . Any idea how to do that the best way ?
Kindest regards
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 ( ) I need this image at the bottom . Any idea how to do that the best way ?
Kindest regards
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the sample code. I'll check it and get back to you.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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>
Github Profile: https://github.com/mertsincan
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...
What I am trying to achieve is something like
| menu |
| items |
| | -> The scrollable Menu
| |
| |
|---------------|
| footer | (outside scrollable part, so always visible)
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...
What I am trying to achieve is something like
| menu |
| items |
| | -> The scrollable Menu
| |
| |
|---------------|
| footer | (outside scrollable part, so always visible)
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 17 guests