starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-14 06:13:32 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Navigation bar too tall #3212

New Issue
Closed
opened 2025-12-29 18:26:46 +01:00 by adam · 4 comments
adam commented 2025-12-29 18:26:46 +01:00
Owner
Copy Link

Originally created by @hSaria on GitHub (Jan 23, 2020).

Originally assigned to: @hSaria on GitHub.

Environment

  • Python version: 3.6.8
  • NetBox version: 2.7.2

Steps to Reproduce

  1. Go to a page that is not too long (/dcim/manufacturers/ or /dcim/regions/ are good examples as long as you only have a couple of objects)
  2. Expand one of the long drop down menus, like Devices and have it extend beyond the page's contents
  3. Attempt to reach the lower options in the drop down menu

Expected Behavior

The navigation bar and its dropdown menus are scrollable

Observed Behavior

The overflowing elements are unreachable

Dropdown menu
image

Navbar is not scrollable
image

Originally created by @hSaria on GitHub (Jan 23, 2020). Originally assigned to: @hSaria on GitHub. ### Environment * Python version: 3.6.8 * NetBox version: 2.7.2 ### Steps to Reproduce 1. Go to a page that is not too long (`/dcim/manufacturers/` or `/dcim/regions/` are good examples as long as you only have a couple of objects) 2. Expand one of the long drop down menus, like `Devices` and have it extend beyond the page's contents 3. Attempt to reach the lower options in the drop down menu ### Expected Behavior The navigation bar and its dropdown menus are scrollable ### Observed Behavior The overflowing elements are unreachable Dropdown menu <img width="523" alt="image" src="https://user-images.githubusercontent.com/34197532/73017172-36a25680-3e17-11ea-8140-28ae5151e715.png"> Navbar is not scrollable <img width="505" alt="image" src="https://user-images.githubusercontent.com/34197532/73017366-9bf64780-3e17-11ea-8902-5d8f65b10773.png">
adam added the type: bugstatus: accepted labels 2025-12-29 18:26:46 +01:00
adam closed this issue 2025-12-29 18:26:46 +01:00
adam commented 2025-12-29 18:26:47 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Jan 23, 2020):

This ought to fix it.

diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
index 45babe70..f9d8e1fa 100644
--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -62,8 +62,20 @@ footer p {
     }
 }
 
+/* Scroll the drop-down menus at or above 768px wide to match bootstrap's behavior for hiding dropdown menus */
+@media (min-width: 768px) {
+    .navbar-nav>li>ul {
+        max-height: 70vh;
+        overflow-y: scroll;
+    }
+}
+
 /* Collapse the nav menu on displays less than 980px wide */
 @media (max-width: 979px) {
+    #navbar {
+        max-height: 70vh;
+        overflow-y: scroll;
+    }
     .navbar-header {
         float: none;
     }
@hSaria commented on GitHub (Jan 23, 2020): This ought to fix it. ```diff diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css index 45babe70..f9d8e1fa 100644 --- a/netbox/project-static/css/base.css +++ b/netbox/project-static/css/base.css @@ -62,8 +62,20 @@ footer p { } } +/* Scroll the drop-down menus at or above 768px wide to match bootstrap's behavior for hiding dropdown menus */ +@media (min-width: 768px) { + .navbar-nav>li>ul { + max-height: 70vh; + overflow-y: scroll; + } +} + /* Collapse the nav menu on displays less than 980px wide */ @media (max-width: 979px) { + #navbar { + max-height: 70vh; + overflow-y: scroll; + } .navbar-header { float: none; } ```
adam commented 2025-12-29 18:26:47 +01:00
Author
Owner
Copy Link

@stale[bot] commented on GitHub (Feb 6, 2020):

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our contributing guide.

@stale[bot] commented on GitHub (Feb 6, 2020): This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Please see our [contributing guide](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
adam commented 2025-12-29 18:26:47 +01:00
Author
Owner
Copy Link

@DanSheps commented on GitHub (Feb 7, 2020):

Hey @hSaria, if you are willing to do the PR for this, I do agree this is probably something that should be fixed.

@DanSheps commented on GitHub (Feb 7, 2020): Hey @hSaria, if you are willing to do the PR for this, I do agree this is probably something that should be fixed.
adam commented 2025-12-29 18:26:47 +01:00
Author
Owner
Copy Link

@hSaria commented on GitHub (Feb 7, 2020):

@DanSheps could you reopen #3997 please? I'm all open for constructive criticism; I only picked the values to address the issue and look relatively neat, but I've no scientific reason for them specifically.

@hSaria commented on GitHub (Feb 7, 2020): @DanSheps could you reopen #3997 please? I'm all open for constructive criticism; I only picked the values to address the issue and look relatively neat, but I've no scientific reason for them specifically.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#3212
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?