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

Dropdowns have transparent background on load at specific screen sizes. #6430

New Issue
Closed
opened 2025-12-29 19:40:38 +01:00 by adam · 10 comments
adam commented 2025-12-29 19:40:38 +01:00
Owner
Copy Link

Originally created by @Computroniks on GitHub (May 2, 2022).

NetBox version

v3.2.2

Python version

3.10

Steps to Reproduce

  1. Create 5 tenants
  2. Create a VLAN
  3. Edit VLAN (make sure not to scroll the page.)
  4. Select on tenant dropdown
  5. Note that the bottom part of the dropdown is transparent

Interestingly, as soon as the user scrolls down the page and then back up to the top, the error does not occur.

OS Details

Issue appears on the following browsers
Chrome 99.0.4844.84 Windows 11
Chrome 99.0.4844.82 Kali Rolling 2021.1
Firefox 78.10.0esr Kali Rolling 2021.1

Expected Behavior

No transpanency on the lower half.

Observed Behavior

image

Originally created by @Computroniks on GitHub (May 2, 2022). ### NetBox version v3.2.2 ### Python version 3.10 ### Steps to Reproduce 1. Create 5 tenants 2. Create a VLAN 3. Edit VLAN (make sure not to scroll the page.) 4. Select on tenant dropdown 5. Note that the bottom part of the dropdown is transparent Interestingly, as soon as the user scrolls down the page and then back up to the top, the error does not occur. ## OS Details Issue appears on the following browsers Chrome 99.0.4844.84 Windows 11 Chrome 99.0.4844.82 Kali Rolling 2021.1 Firefox 78.10.0esr Kali Rolling 2021.1 ### Expected Behavior No transpanency on the lower half. ### Observed Behavior ![image](https://user-images.githubusercontent.com/67638596/166167108-5fa8d4d7-eaa5-4267-aefb-b8087db0a879.png)
adam added the type: bugstatus: needs ownerpending closure labels 2025-12-29 19:40:38 +01:00
adam closed this issue 2025-12-29 19:40:38 +01:00
adam commented 2025-12-29 19:40:38 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 2, 2022):

I cannot replicate this on Chrome 101.0.4951.41 and Firefox 99.0.1 (Windows 10). The dropdown is spawning at the wrong place in your browser. Is it possible for you to recreate on a fresh instance of netbox? While normally not advised, you can use the demo site to test if it's not possible to spin up your own clean instance.

Also, please check your javascript console for errors.

@kkthxbye-code commented on GitHub (May 2, 2022): I cannot replicate this on Chrome 101.0.4951.41 and Firefox 99.0.1 (Windows 10). The dropdown is spawning at the wrong place in your browser. Is it possible for you to recreate on a fresh instance of netbox? While normally not advised, you can use the [demo site](https://demo.netbox.dev/) to test if it's not possible to spin up your own clean instance. Also, please check your javascript console for errors.
adam commented 2025-12-29 19:40:38 +01:00
Author
Owner
Copy Link

@Computroniks commented on GitHub (May 2, 2022):

Yep, it does seem to still be present on the demo site.
image
I will check with an updated chrome version

@Computroniks commented on GitHub (May 2, 2022): Yep, it does seem to still be present on the demo site. ![image](https://user-images.githubusercontent.com/67638596/166218382-e62eacc9-adbc-4a9b-9c60-971855432390.png) I will check with an updated chrome version
adam commented 2025-12-29 19:40:39 +01:00
Author
Owner
Copy Link

@Computroniks commented on GitHub (May 2, 2022):

Just updated chrome to 100.0.4896.127 on Win11 and the issue is still present. There also doesn't seem to be any logs in the console. Clearing the cache doesn't make any difference at all. Quick question, what size screen are you trying to reproduce this on? I am just thinking that perhaps it is when the end of the dropdown would normally extend beyond the bottom of the page and the logic for flipping it to rise above the input box is doing something weird.

@Computroniks commented on GitHub (May 2, 2022): Just updated chrome to 100.0.4896.127 on Win11 and the issue is still present. There also doesn't seem to be any logs in the console. Clearing the cache doesn't make any difference at all. Quick question, what size screen are you trying to reproduce this on? I am just thinking that perhaps it is when the end of the dropdown would normally extend beyond the bottom of the page and the logic for flipping it to rise above the input box is doing something weird.
adam commented 2025-12-29 19:40:39 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 2, 2022):

Quick question, what size screen are you trying to reproduce this on? I am just thinking that perhaps it is when the end of the dropdown would normally extend beyond the bottom of the page and the logic for flipping it to rise above the input box is doing something weird.

I tried at full screen on 1080p 16/9 and 1440p 16/9. The innerHeight will differ depending on bookmarksbar and size of the taskbar.

If possible, could you type window.innerHeight in your javascript console at the size you experience the issue? Also, please make sure you are at 0% zoom (ctrl+0).

@kkthxbye-code commented on GitHub (May 2, 2022): >Quick question, what size screen are you trying to reproduce this on? I am just thinking that perhaps it is when the end of the dropdown would normally extend beyond the bottom of the page and the logic for flipping it to rise above the input box is doing something weird. I tried at full screen on 1080p 16/9 and 1440p 16/9. The innerHeight will differ depending on bookmarksbar and size of the taskbar. If possible, could you type window.innerHeight in your javascript console at the size you experience the issue? Also, please make sure you are at 0% zoom (ctrl+0).
adam commented 2025-12-29 19:40:39 +01:00
Author
Owner
Copy Link

@Computroniks commented on GitHub (May 2, 2022):

At no zoom the issue occurs on monitors with window.innerHeight at 929 and 916. I also tried on a monitor where it was 634 but this forced me to scroll to get to the dropdown so the issue didn't occur. It occured with the other dropdown instead.

@Computroniks commented on GitHub (May 2, 2022): At no zoom the issue occurs on monitors with `window.innerHeight` at `929` and `916`. I also tried on a monitor where it was `634` but this forced me to scroll to get to the dropdown so ~~the issue didn't occur.~~ It occured with the other dropdown instead.
adam commented 2025-12-29 19:40:40 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 2, 2022):

I managed to replicate it with various dropdowns on the VLAN edit page. The select widget has to be close to the bottom of the page, done by resizing the window until it failed. Only the first load of the widget is broken, subsequent loads are fine.

@kkthxbye-code commented on GitHub (May 2, 2022): I managed to replicate it with various dropdowns on the VLAN edit page. The select widget has to be close to the bottom of the page, done by resizing the window until it failed. Only the first load of the widget is broken, subsequent loads are fine.
adam commented 2025-12-29 19:40:40 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (May 14, 2022):

@thatmattlove - I tried looking at this. The issue is that the direction of the select field is determined when opened. We then listen for the beforeOpen slim-select event and load the data. The size of the select field is small when opened, because the options have not been added yet (only the search field is shown until data loads in), so it spawns the select field in the down direction even though it is too big when the options finally load.

Couldn't find a good solution to fix this, so if you have the time at some point, it would be apreciated if you could help or give a pointer.

@kkthxbye-code commented on GitHub (May 14, 2022): @thatmattlove - I tried looking at this. The issue is that the direction of the select field is determined when opened. We then listen for the beforeOpen slim-select event and load the data. The size of the select field is small when opened, because the options have not been added yet (only the search field is shown until data loads in), so it spawns the select field in the down direction even though it is too big when the options finally load. Couldn't find a good solution to fix this, so if you have the time at some point, it would be apreciated if you could help or give a pointer.
adam commented 2025-12-29 19:40:40 +01:00
Author
Owner
Copy Link

@thatmattlove commented on GitHub (May 16, 2022):

While I haven't come up with a solution to this, I at least have a cause to provide: this seems to have been introduced in 9c9fcaf, which changed the default fetch trigger from load to open. SlimSelect is rendering the element with only one option (the selected one), and therefore using a small downward menu. Then loads the other available options, which does not re-render the menu, but rather adds the new options to the existing one. I confirmed this by setting the trigger attribute back to open, and the issue does not occur.

I've briefly looked at the SlimSelect repo and I think the sizing and placement is all happening as part of the open method, mainly here. However, that putContent method isn't exported from the package, so we can't access it.

My best recommendations would be to either a) set the trigger back to open (not ideal), b) open an issue on the SlimSelect repo and see where that goes (likely nowhere), or c) just accept this behavior for the time being, as it seems to be a relative corner case.

@thatmattlove commented on GitHub (May 16, 2022): While I haven't come up with a solution to this, I at least have a cause to provide: this seems to have been introduced in 9c9fcaf, which changed the default fetch trigger from `load` to `open`. SlimSelect is rendering the element with only one option (the selected one), and therefore using a small downward menu. *Then* loads the other available options, which does not re-render the menu, but rather adds the new options to the existing one. I confirmed this by setting the trigger attribute back to `open`, and the issue does not occur. I've briefly looked at the SlimSelect repo and I think the sizing and placement is all happening as part of the `open` method, mainly [here](https://github.com/brianvoe/slim-select/blob/e6b42a9c11ba743fab63b5f909d8499239362d98/src/slim-select/index.ts#L295-L300). However, that `putContent` method isn't exported from the package, so we can't access it. My best recommendations would be to either a) set the trigger back to `open` (not ideal), b) open an issue on the SlimSelect repo and see where that goes (likely nowhere), or c) just accept this behavior for the time being, as it seems to be a relative corner case.
adam commented 2025-12-29 19:40:40 +01:00
Author
Owner
Copy Link

@github-actions[bot] commented on GitHub (Jul 16, 2022):

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. Do not attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our contributing guide.

@github-actions[bot] commented on GitHub (Jul 16, 2022): 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. **Do not** attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our [contributing guide](https://github.com/netbox-community/netbox/blob/develop/CONTRIBUTING.md).
adam commented 2025-12-29 19:40:41 +01:00
Author
Owner
Copy Link

@github-actions[bot] commented on GitHub (Aug 15, 2022):

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.

@github-actions[bot] commented on GitHub (Aug 15, 2022): This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.
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 pending closure status: needs owner 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#6430
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?