Feature #7943
closed
Overflow scrolling for top navigation drop-down menus in Fixed mode
Added by Ken Moini about 7 years ago.
Updated 8 months ago.
Plus Target Version:
24.03
Description
Some resolutions (16:9 on laptops) don't have the vertical height to display all drop down menu items on items such as "Services" and "Diagnostics." See attachment for depicted example.
Adding two modifiers to the CSS stylesheet fixes this issue with no issues for displays with enough vertical height to display the full drop down list.
#pf-navbar .navbar-nav > li > .dropdown-menu {
max-height: calc(100vh - 55px);
overflow:auto;
}
See attached file for fix depiction. Might need to place in specific media-query segments of stylesheet to prevent affecting mobile users if the bootstrap base is responsive.
Thanks in advanced,
-Ken Moini
Files
Scrolling the entire page down slightly will allow access to these menu items in constrained situations. However, this may be a more elegant solution. Not necessarily a problem, though. Might just look better with a bit of CSS pizzazz.
Hello,
while this can seem like a trivial issue for some, usability and accesibility are important aspects of any web interface. I have poor eye sight and need quite large font sizes. For me, a couple of the drop-down menus are therefore trunkated and to reach the bottom items I have to zoom out in the browser to the point I can hardly read what is writted as the font gets too small.
Another redmine (https://redmine.pfsense.org/issues/10271) also highlights the issue relating to having many interfaces which would no be possible to solve just by zooming out.
My patch to enable scrollable drop-down menus for this is very similar to the one proposed. Note: this patch needs to be applied to all themes.
[23.09.1-RELEASE][admin@gateway.local.lan]/usr/local/www: diff -U 4 -u css/pfSense-dark.css.orig css/pfSense-dark.css
--- css/pfSense-dark.css.orig 2023-12-06 21:10:52.000000000 +0100
+++ css/pfSense-dark.css 2024-01-26 13:23:39.667707000 +0100
@@ -75,8 +75,10 @@
.dropdown-menu {
background-color: #000;
opacity: .93;
border-radius: 10px;
+ max-height: calc(98vh - 35px);
+ overflow-y: auto;
}
.dropdown-menu>li>a {
color: #e0e0e0;
I urge Netgate to consider these proposals to fix one of pfSense's main usability issues.
- Tracker changed from Bug to Feature
- Subject changed from CSS Overflow Fix for Drop Down Menus in webConfigurator to Add overflow scrolling to navigation dropdown menus
- Status changed from New to Feedback
- Assignee set to Marcos M
- Target version set to 2.8.0
- Plus Target Version set to 24.03
- Release Notes set to Default
- Affected Version deleted (
2.4.x)
- Affected Architecture deleted (
amd64)
- Has duplicate Feature #10271: Large number of VLAN/LANs make "Interfaces" menu hard to access added
- % Done changed from 0 to 100
- Subject changed from Add overflow scrolling to navigation dropdown menus to Overflow scrolling for navigation drop-down menus
Updating subject for release notes.
- Status changed from Feedback to New
The overflow scrolling inside the menu should only be enabled when the menu is fixed to the top of the window and remains visible (e.g. System > General "Top Navigation" set to "Fixed" or if per-user preference is set to "Fixed")
Otherwise the menu has its own scrollbar and yet the menu scrolls off the top of the window and the double scrolling is confusing/ugly.
- Status changed from New to Pull Request Review
- Status changed from Pull Request Review to Feedback
- Status changed from Feedback to Resolved
It's much better on the current snap (with that merge included). No longer double scrolls the menu when it's in the default mode.
- Subject changed from Overflow scrolling for navigation drop-down menus to Overflow scrolling for top navigation drop-down menus in Fixed mode
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by 
Updated by 
