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

Rack elevation images override page styling when loading in #11456

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

Originally created by @aq5747 on GitHub (Aug 7, 2025).

Originally assigned to: @jeremystretch on GitHub.

Deployment Type

Self-hosted

NetBox Version

v4.3.5

Python Version

3.10

Steps to Reproduce

  1. Go to a device page which is assigned to a rack and position (thus will show a rack elevation image)
  2. Make sure the window is small enough so that the rack elevation image hasn't loaded yet
  3. Scroll down the page slowly until the rack image lazy loads in
  4. Notice how the entire page "shifts" and some elements change styles as soon as the rack elevation image loads (Very noticeable on table headers).

Expected Behavior

Loading of rack images should not override the styling of the page.

Observed Behavior

Some of the styling from the rack elevation SVG image is also being applied to the page itself after the image lazy loads in. When the rack image loads you can see the entire device page "shift" as some styling is updated. This is very noticeable with table headers on the page, such as the one on the Images card right above the rack. This happens on any page where a rack elevation image loads but is most noticeable on the device page.

Image

This seems like it's related to the lazy loading of the rack image (#19550), as this doesn't happen in v4.3.3 or earlier.

Originally created by @aq5747 on GitHub (Aug 7, 2025). Originally assigned to: @jeremystretch on GitHub. ### Deployment Type Self-hosted ### NetBox Version v4.3.5 ### Python Version 3.10 ### Steps to Reproduce 1. Go to a device page which is assigned to a rack and position (thus will show a rack elevation image) 2. Make sure the window is small enough so that the rack elevation image hasn't loaded yet 3. Scroll down the page slowly until the rack image lazy loads in 4. Notice how the entire page "shifts" and some elements change styles as soon as the rack elevation image loads (Very noticeable on table headers). ### Expected Behavior Loading of rack images should not override the styling of the page. ### Observed Behavior Some of the styling from the rack elevation SVG image is also being applied to the page itself after the image lazy loads in. When the rack image loads you can see the entire device page "shift" as some styling is updated. This is very noticeable with table headers on the page, such as the one on the Images card right above the rack. This happens on any page where a rack elevation image loads but is most noticeable on the device page. <img width="724" height="363" alt="Image" src="https://github.com/user-attachments/assets/ff74a34e-0880-4ad4-a8b7-88f33c66bbf3" /> This seems like it's related to the lazy loading of the rack image (#19550), as this doesn't happen in v4.3.3 or earlier.
adam added the type: bugstatus: acceptedseverity: low labels 2025-12-29 21:45:26 +01:00
adam closed this issue 2025-12-29 21:45:27 +01:00
adam commented 2025-12-29 21:45:27 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 20, 2025):

I believe this is due to embedding the SVG code (and its style) directly within the page, rather than using an <object> element to load the data as we did prior to #19550. The SVG styling is no longer contained and now overflows onto the rest of the page.

It doesn't seem that we actually need HTMX here. We should be able to use <img src="..." loading="lazy"> to achieve the desired behavior while keeping the SVG styling contained.

@jeremystretch commented on GitHub (Aug 20, 2025): I believe this is due to embedding the SVG code (and its style) directly within the page, rather than using an `<object>` element to load the data as we did prior to #19550. The SVG styling is no longer contained and now overflows onto the rest of the page. It doesn't seem that we actually need HTMX here. We should be able to use `<img src="..." loading="lazy">` to achieve the desired behavior while keeping the SVG styling contained.
adam commented 2025-12-29 21:45:27 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 20, 2025):

Unfortunately, using an <img> tag apparently won't support our labels/images toggle for the rack elevation.

The only solution I can see to support lazy loading would be to introduce a separate HTMX-enabled endpoint which returns the <object> element, which then in turn loads the SVG data from the REST API, which would be rather inefficient.

@jeremystretch commented on GitHub (Aug 20, 2025): Unfortunately, using an `<img>` tag apparently won't support our labels/images toggle for the rack elevation. The only solution I can see to support lazy loading would be to introduce a separate HTMX-enabled endpoint which returns the `<object>` element, which then in turn loads the SVG data from the REST API, which would be rather inefficient.
adam commented 2025-12-29 21:45:27 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 20, 2025):

Turns out we can just tweak the CSS itself to apply only to the SVG element. (I was under the impression the offending code was as a result of the imports, but no.)

@jeremystretch commented on GitHub (Aug 20, 2025): Turns out we can just tweak the CSS itself to apply only to the SVG element. (I was under the impression the offending code was as a result of the imports, but no.)
adam commented 2025-12-29 21:45:28 +01:00
Author
Owner
Copy Link

@nshcherbak commented on GitHub (Sep 18, 2025):

I also see this issue after upgrading from 4.3.2 to 4.4.1 on docker.

Image

I repeated this behavior on Deployment Type: Self-Hosted!
After this, in the user's settings I installed the “HTMX Navigation” parameter in Disable and everything was repaired !!!

@nshcherbak commented on GitHub (Sep 18, 2025): I also see this issue after upgrading from 4.3.2 to 4.4.1 on docker. <img width="1698" height="1299" alt="Image" src="https://github.com/user-attachments/assets/6570e9c2-da6b-4752-b5d6-e51b0ed9f801" /> I repeated this behavior on Deployment Type: Self-Hosted! After this, in the user's settings I installed the “HTMX Navigation” parameter in Disable and everything was repaired !!!
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 severity: low 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#11456
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?