Hi,
If my menu on the left side has more entries than the view, than I would expect a scrollbar, but it doesn´t appear.
Expected:
A scrollbar appears sometimes, but can there maybe implement a spacing between the end of the view and the start of the menu.
So currently the last entries are not showing.
Can you adjust that please
Scrollbar / Space missing for long list at left menu
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.
Sire, here is my menu... I´ve changed the links and the linkname, but other than that is exactly the same....
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pr="http://primefaces.org/rain">
<div class="menu-wrapper">
<div class="layout-menu-container">
<ui:fragment
rendered="#{themePreferencesPrimefacesRain.profileMode == 'popup' ? false : true}">
<div class="layout-profile">
<a class="layout-profile-button" href="#"> <span
class="image-name"> <p:graphicImage
name="images/avatar-profilemenu.png" library="rain-layout" /> <span
class="layout-profile-userinfo"> <span
class="layout-profile-name">Jordi Santiago</span> <span
class="layout-profile-mail">jordi@primetek.com.tr</span>
</span>
</span> <i class="layout-profile-icon pi pi-chevron-down" />
</a>
<ul class="layout-profile-menu">
<li><a href="#"> <i class="pi pi-user" /> <span>Profile</span>
</a></li>
<li><a href="#"> <i class="pi pi-cog" /> <span>Settings</span>
</a></li>
<li><a href="#"> <i class="pi pi-envelope" /> <span>Messages</span>
</a></li>
<li><a href="#"> <i class="pi pi-bell" /> <span>Notifications</span>
</a></li>
</ul>
</div>
</ui:fragment>
<h:form id="menuform">
<pr:menu widgetVar="RainMenuWidget">
<p:menuitem value="Dashboard" icon="fa fa-home"
outcome="/dashboard" />
<p:submenu label="Tickets" icon="fa fa-file">
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-plus-circle"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-clock-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Einstellung" icon="fa fa-cog">
<p:menuitem value="Test" icon="fa fa-users"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-star-half-o"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-sort-numeric-asc"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-thumbs-o-up"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-thumbs-o-up"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-user-circle-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Weitere Einstellung" icon="fa fa-dot-circle-o">
<p:submenu label="Automatisierung" icon="fa fa-list-ol">
<p:menuitem value="Workflows" icon="fa fa-list-ol"
outcome="/dashboard" />
<p:menuitem value="Ausführung" icon="fa fa-check"
outcome="/dashboard" />
<p:menuitem value="Kategorien" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-university">
<p:menuitem value="Test" icon="fa fa-sun-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-envelope-o">
<p:menuitem value="Test" icon="fa fa-envelope-open"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-paint-brush"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-clock-o">
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-repeat"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Benachrichtigungen" icon="fa fa-bell-o">
<p:menuitem value="Profile" icon="fa fa-bell-o"
outcome="/dashboard" />
<p:menuitem value="Emailvorlagen" icon="fa fa-envelope-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-delicious">
<p:menuitem value="Test" icon="fa fa-delicious"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-file-text-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-font">
<p:menuitem value="Test" icon="fa fa-bell-o"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-envelope-o"
outcome="/dashboard" />
<p:submenu label="Test" icon="fa fa-list">
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
</p:submenu>
<p:submenu label="Sonstiges" icon="fa fa-dot-circle-o">
<p:menuitem value="Test" icon="fa fa-tags"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-globe">
<p:menuitem value="Test" icon="fa fa-key"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-exclamation-triangle"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-fighter-jet">
<p:menuitem value="Test" icon="fa fa-fighter-jet"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-key"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-exclamation-triangle"
outcome="/dashboard" />
</p:submenu>
</p:submenu>
<p:submenu label="Test" icon="fa fa-user">
<p:menuitem value="Test icon="fa fa-user"
outcome="/dashboard" />
<p:submenu label="Test" icon="fa fa-bell-o">
<p:menuitem value="Test" icon="fa fa-cog"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
<p:menuitem value="Test" icon="fa fa-thumb-tack"
outcome="/dashboard />
</p:submenu>
<p:submenu label="Test" icon="fa fa-television">
<p:submenu label="Test" icon="fa fa-circle">
<p:menuitem value="Test" icon="fa fa-language"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-map"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-smile-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-exclamation-triangle">
<p:submenu label="Test" icon="fa fa-cogs">
<p:menuitem value="Test" icon="fa fa-cogs"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-key">
<p:menuitem value="Test" icon="fa fa-key"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-sitemap"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-users"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-bell-o">
<p:menuitem value="Test" icon="fa fa-bell-slash-o"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-bell-slash-o"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-envelope-o"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-bell-o"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-hand-paper-o ">
<p:menuitem value="Test" icon="fa fa-hand-paper-o "
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-sitemap"
outcome="/dashboard" />
</p:submenu>
<p:menuitem value="Nummernkreise" icon="fa fa-sort-numeric-asc"
outcome="/dashboard" />
<p:menuitem value="Emailpostfächer" icon="fa fa-envelope-open"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-globe">
<p:menuitem value="Test" icon="fa fa-university"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-user"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-exclamation-triangle">
<p:menuitem value="Test" icon="fa fa-exclamation-triangle"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-gavel">
<p:menuitem value="Test" icon="fa fa-gavel"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-gavel">
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-gavel"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-clock-o">
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-repeat"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-globe">
<p:menuitem value="Test" icon="fa fa-exclamation-triangle"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-fighter-jet">
<p:menuitem value="Test" icon="fa fa-fighter-jet"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-exclamation-triangle"
outcome="/dashboard" />
</p:submenu>
<p:submenu label="Test" icon="fa fa-file">
<p:menuitem value="Test" icon="fa fa-file"
outcome="/dashboard" />
<p:menuitem value="Test" icon="fa fa-list"
outcome="/dashboard" />
</p:submenu>
</p:submenu>
</pr:menu>
</h:form>
</div>
</div>
</ui:composition>
Primefaces 12.0, WildFly 21
Hello again,
I have reviewed your code and attached the relevant images below. I noticed some unclosed tags in your code, which you can see from the markers. After fixing them, there were no issues with the scrollbar. You can also see the image related to it below.
https://ibb.co/R4Y3fxJ
https://ibb.co/zbNdrV7
https://ibb.co/5MvMvY3
I have reviewed your code and attached the relevant images below. I noticed some unclosed tags in your code, which you can see from the markers. After fixing them, there were no issues with the scrollbar. You can also see the image related to it below.
https://ibb.co/R4Y3fxJ
https://ibb.co/zbNdrV7
https://ibb.co/5MvMvY3
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
The menu has max-height 450px and overflow as seen in screen shot so a scrollbar should appear above 450px, we currently cannot replicate the issue I'm afraid.
The issue is still there...
Please have the same number of items on the left side..
The scrollbar is visible, but I cannot see all items than in the context menu.
The context menu height should be only until the end of the page, but it seems it´s bigger, but I cannot scroll down here.
My screenshot is exactly the whole screen... As you can see at the end: the scrollbar is there, but I cannot scroll down further.
Can you fix this, please.
Thanks
Please have the same number of items on the left side..
The scrollbar is visible, but I cannot see all items than in the context menu.
The context menu height should be only until the end of the page, but it seems it´s bigger, but I cannot scroll down here.
My screenshot is exactly the whole screen... As you can see at the end: the scrollbar is there, but I cannot scroll down further.
Can you fix this, please.
Thanks
Primefaces 12.0, WildFly 21
Hello again,
Sorry for my delayed response, I was diligently working to resolve your issue. When I tried with the same number of items, I didn't encounter any errors either.
I will further investigate to assist you and if I find a possible solution for your issue, I will inform you.
Best Regards,
Olgu
Sorry for my delayed response, I was diligently working to resolve your issue. When I tried with the same number of items, I didn't encounter any errors either.
I will further investigate to assist you and if I find a possible solution for your issue, I will inform you.
Best Regards,
Olgu
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest