Feature #7943
closedOverflow scrolling for top navigation drop-down menus in Fixed mode
100%
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
Related issues
Updated by Kris Phillips almost 4 years ago
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.
Updated by Patrik Stahlman 9 months ago
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.
Updated by Jim Pingle 9 months ago
The primary reason this hasn't seen any traction is because it's only a problem for users who have opted into the non-default option to lock the menu to the top of the window. You can easily change this on a global or per-user basis.
Global option "Top Navigation" - https://docs.netgate.com/pfsense/en/latest/config/general.html#webconfigurator
Per-user "Custom Settings / Top Navigation" - https://docs.netgate.com/pfsense/en/latest/usermanager/users.html#per-user-gui-options-and-dashboard-layout
If either of those is set to "Fixed" you'll have this problem and if you change it to "Scrolls with page" you won't.
Updated by Marcos M 9 months ago
- 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)
https://gitlab.netgate.com/pfSense/pfSense/-/merge_requests/1127
The CSS fix works for Firefox / Chromium, desktop/mobile viewports, and fixed / scroll with page settings.
Updated by Marcos M 9 months ago
- Has duplicate Feature #10271: Large number of VLAN/LANs make "Interfaces" menu hard to access added
Updated by Marcos M 9 months ago
- % Done changed from 0 to 100
Applied in changeset 79025bde07a7c9f9b4d6d80be3c2efca9f1bd2c4.
Updated by Jim Pingle 9 months ago
- Subject changed from Add overflow scrolling to navigation dropdown menus to Overflow scrolling for navigation drop-down menus
Updating subject for release notes.
Updated by Jim Pingle 9 months ago
- 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.
Updated by Marcos M 8 months ago
- Status changed from Pull Request Review to Feedback
Applied in changeset 9b37bb0fcf2de99089e67aa619b3cb366abd4641.
Updated by Jim Pingle 8 months ago
- 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.
Updated by Jim Pingle 8 months ago
- Subject changed from Overflow scrolling for navigation drop-down menus to Overflow scrolling for top navigation drop-down menus in Fixed mode