Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
koh6uawi opened this issue Aug 17, 2021 · 1 comment
Closed

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

koh6uawi opened this issue Aug 17, 2021 · 1 comment
Assignees
Labels
beta Concerns a bug/feature in a beta release status: accepted This issue has been accepted for implementation type: bug A confirmed report of unexpected behavior in the application

Comments

@koh6uawi
Copy link

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

@koh6uawi koh6uawi added the type: bug A confirmed report of unexpected behavior in the application label Aug 17, 2021
@jeremystretch jeremystretch added beta Concerns a bug/feature in a beta release status: accepted This issue has been accepted for implementation labels Aug 17, 2021
@jeremystretch jeremystretch self-assigned this Aug 17, 2021
@jeremystretch
Copy link
Member

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
beta Concerns a bug/feature in a beta release status: accepted This issue has been accepted for implementation type: bug A confirmed report of unexpected behavior in the application
Projects
None yet
Development

No branches or pull requests

2 participants