Scrollbar / Space missing for long list at left menu

[rider]

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

[olgubasak]

Hi,

Could you try again by updating to the latest version of PrimeFaces?

[rider]

No, this hasn´t solved the issue

[olgubasak]

Hi again,

When I try the code, I don't encounter an error, but if you could send me the menu items in your code, I would like to try it again and check the issue.

[rider]

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>

[olgubasak]

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

[rider]

thank you for investigation.
Those issues came from my adjusted menu (replace links and linkname).
But those are not the issue for the topic itself...

Any further idea?

[cagatay.civici]

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.

[rider]

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

[olgubasak]

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