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

Add CSS class to elevation SVG styles to avoid any styles conflict when integrating elevation in a third party app #7714

New Issue
Closed
opened 2025-12-29 20:27:24 +01:00 by adam · 4 comments
adam commented 2025-12-29 20:27:24 +01:00
Owner
Copy Link

Originally created by @Wait4Code on GitHub (Mar 3, 2023).

NetBox version

3.4.3

Feature type

Data model extension

Proposed functionality

I think that SVG tag of elevations should have a specific CSS class and all its styles should be prefixed with that class.

Use case

I'm storing elevation SVG code in a third party app via netbox APIs.
I'm trying to display theses SVG in my app but when I integrate them, my styles are broken, especially because of the following rule in SVG styles :

*{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-size:.875rem
}

To get around this problem, I'm using object HTML tag but I think it would be nice if elevations styles could be more isolated.

Database changes

No response

External dependencies

No response

Originally created by @Wait4Code on GitHub (Mar 3, 2023). ### NetBox version 3.4.3 ### Feature type Data model extension ### Proposed functionality I think that SVG tag of elevations should have a specific CSS class and all its styles should be prefixed with that class. ### Use case I'm storing elevation SVG code in a third party app via netbox APIs. I'm trying to display theses SVG in my app but when I integrate them, my styles are broken, especially because of the following rule in SVG styles : ```CSS *{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"; font-size:.875rem } ``` To get around this problem, I'm using object HTML tag but I think it would be nice if elevations styles could be more isolated. ### Database changes _No response_ ### External dependencies _No response_
adam added the type: feature label 2025-12-29 20:27:24 +01:00
adam closed this issue 2025-12-29 20:27:24 +01:00
adam commented 2025-12-29 20:27:25 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Mar 16, 2023):

I'm not sure I understand the issue. The style information is embedded within the SVG element, so it shouldn't affect anything else.

@jeremystretch commented on GitHub (Mar 16, 2023): I'm not sure I understand the issue. The style information is embedded within the SVG element, so it shouldn't affect anything else.
adam commented 2025-12-29 20:27:25 +01:00
Author
Owner
Copy Link

@Wait4Code commented on GitHub (Mar 20, 2023):

Well, @jeremystretch, you're right if the svg is displayed with an

@Wait4Code commented on GitHub (Mar 20, 2023): Well, @jeremystretch, you're right if the svg is displayed with an <object> tag (method used in Netbox). But if svg is directly embedded in the html, then styles are "shared". See https://codesandbox.io/s/competent-pascal-p9780j?file=/index.html and try removing the svg tag, you will see that styles from stylesheet are applied again.
adam commented 2025-12-29 20:27:25 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Mar 20, 2023):

The SVG image is a separate file and is not intended to be embedded, largely for this reason. Using <object> tags to render them on an HTML page is the intended and supported approach.

@jeremystretch commented on GitHub (Mar 20, 2023): The SVG image is a separate file and is not intended to be embedded, largely for this reason. Using `<object>` tags to render them on an HTML page is the intended and supported approach.
adam commented 2025-12-29 20:27:26 +01:00
Author
Owner
Copy Link

@Wait4Code commented on GitHub (Mar 20, 2023):

I do not agree with you. Using <object> tags is a method, inlining SVG in HTML is another valid one. Inlining not only saves an HTTP request when loading page but, mainly, it also ease interaction with JavaScript.
I recognize that there is no need for CSS class for the netbox app but I maintain that it can be useful when integrating netbox SVG's in a third party app and I think that it's a very low cost improvement
If you agree with that, I will be happy to propose a PR

@Wait4Code commented on GitHub (Mar 20, 2023): I do not agree with you. Using `<object>` tags is a method, inlining SVG in HTML is another valid one. Inlining not only saves an HTTP request when loading page but, mainly, it also ease interaction with JavaScript. I recognize that there is no need for CSS class for the netbox app but I maintain that it can be useful when integrating netbox SVG's in a third party app and I think that it's a very low cost improvement If you agree with that, I will be happy to propose a PR
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 type: feature
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#7714
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?