Project

General

Profile

Actions

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.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
Web Interface
Target version:
Start date:
10/15/2017
Due date:
% Done:

100%

Estimated time:
0.01 h
Plus Target Version:
24.03
Release Notes:
Default

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

pfSenseError.png (172 KB) pfSenseError.png pfSense webConfigurator DropDown Scroll Issue Ken Moini, 10/15/2017 01:55 PM
pfSenseFix.png (159 KB) pfSenseFix.png pfSense webConfigurator DropDown Scroll Fix Ken Moini, 10/15/2017 01:58 PM

Related issues

Has duplicate Feature #10271: Large number of VLAN/LANs make "Interfaces" menu hard to accessResolved02/20/2020

Actions
Actions #1

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.

Actions #2

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.

Actions #3

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.

Actions #4

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.

Actions #5

Updated by Marcos M 9 months ago

  • Has duplicate Feature #10271: Large number of VLAN/LANs make "Interfaces" menu hard to access added
Actions #6

Updated by Marcos M 9 months ago

  • % Done changed from 0 to 100
Actions #7

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.

Actions #8

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.

Actions #9

Updated by Marcos M 8 months ago

  • Status changed from New to Pull Request Review
Actions #10

Updated by Marcos M 8 months ago

  • Status changed from Pull Request Review to Feedback
Actions #11

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.

Actions #12

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
Actions

Also available in: Atom PDF