Search bar object type dropdown menu truncated on small screens #5191

New Issue

adam · 2025-12-29T19:25:18+01:00

adam commented

2025-12-29 19:25:18 +01:00

Originally created by @koh6uawi on GitHub (Aug 17, 2021).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v3.0-beta2

Python version

3.9

Steps to Reproduce

Use a small screen (eg. 1440×900).

Expected Behavior

One should be able to choose the object type in the search bar even it they are using a small screen (maybe by removing the sticky class attribute on the search bar, or by making the dropdown menu scrollable?).

Observed Behavior

When using a small screen, the dropdown menu is truncated (as the search bar is sticky, the end of the menu can't be viewed even when scrolling).

Originally created by @koh6uawi on GitHub (Aug 17, 2021). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v3.0-beta2 ### Python version 3.9 ### Steps to Reproduce Use a small screen (eg. 1440×900). ### Expected Behavior One should be able to choose the object type in the search bar even it they are using a small screen (maybe by removing the sticky class attribute on the search bar, or by making the dropdown menu scrollable?). ### Observed Behavior When using a small screen, the dropdown menu is truncated (as the search bar is sticky, the end of the menu can't be viewed even when scrolling). ![Screen Shot 2021-08-17 at 15 24 20](https://user-images.githubusercontent.com/89084173/129734125-63f4a566-20b4-4f37-ad93-97a5750d4ab5.png)

adam added the type: bug status: accepted beta labels 2025-12-29 19:25:18 +01:00

adam closed this issue

2025-12-29 19:25:18 +01:00

adam commented

2025-12-29 19:25:19 +01:00

@jeremystretch commented on GitHub (Aug 17, 2021):

Interestingly, we do have an accommodation in place for this already, however it's bound to the screen's width rather than its height.

    // Object Selector Dropdown Menu
    .search-obj-selector {
      @include media-breakpoint-down(lg) {
        // Limit the height and enable scrolling on mobile devices.
        max-height: 70vh;
        overflow-y: auto;
      }

IMO it's reasonable to always restrict the dropdown's relative height regardless of screen size.

@jeremystretch commented on GitHub (Aug 17, 2021): Interestingly, we do have an accommodation in place for this already, however it's bound to the screen's width rather than its height. ```css // Object Selector Dropdown Menu .search-obj-selector { @include media-breakpoint-down(lg) { // Limit the height and enable scrolling on mobile devices. max-height: 70vh; overflow-y: auto; } ``` IMO it's reasonable to always restrict the dropdown's relative height regardless of screen size.

Sign in to join this conversation.

Branches Tags

main

update-changelog-comments-docs

feature-removal-issue-type

20911-dropdown

20239-plugin-menu-classes-mutable-state

21097-graphql-id-lookups

feature

fix_module_substitution

20923-dcim-templates

20044-elevation-stuck-lightmode

feature-ip-prefix-link

v4.5-beta1-release

20068-import-moduletype-attrs

20766-fix-german-translation-code-literals

20378-del-script

7604-filter-modifiers-v3

circuit-swap

12318-case-insensitive-uniqueness

20637-improve-device-q-filter

20660-script-load

19724-graphql

20614-update-ruff

14884-script

02496-max-page

19720-macaddress-interface-generic-relation

19408-circuit-terminations-export-templates

20203-openapi-check

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/netbox#5191