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

Text length can extend beyond the boundary of its container panel on a model's detail page #7089

New Issue
Closed
opened 2025-12-29 20:19:04 +01:00 by adam · 8 comments
adam commented 2025-12-29 20:19:04 +01:00
Owner
Copy Link

Originally created by @atownson on GitHub (Oct 6, 2022).

NetBox version

v3.3.5

Python version

3.8

Steps to Reproduce

  1. Create a custom field name "json_example" with a Type of JSON for any given model.
  2. Add a value to any given instantiated model for the "json_example" field that is rather long, say 100 characters.
  3. View the model's detail page and observe the value extends beyond the panel boundary, given the width of the webpage.

Expected Behavior

The horizontally-long text should either wrap or a scrollbar should be shown.

Observed Behavior

The text extends beyond the panel boundaries.

demo.netbox.dev:
image

The Config Context works well with a scrollbar:
image

The JSON field is the most obvious offender as it's quite common for the text to be long, but other, more exaggerated, examples are given in the illustration.

My suggestion would be to implement an automatic scrollbar if the content overflows for just the single field value, so that users don't have to scroll the entire panel and they don't have to scroll to access buttons that are justified to the right.

Originally created by @atownson on GitHub (Oct 6, 2022). ### NetBox version v3.3.5 ### Python version 3.8 ### Steps to Reproduce 1. Create a custom field name "json_example" with a Type of JSON for any given model. 2. Add a value to any given instantiated model for the "json_example" field that is rather long, say 100 characters. 3. View the model's detail page and observe the value extends beyond the panel boundary, given the width of the webpage. ### Expected Behavior The horizontally-long text should either wrap or a scrollbar should be shown. ### Observed Behavior The text extends beyond the panel boundaries. demo.netbox.dev: ![image](https://user-images.githubusercontent.com/52260120/194411678-7126abc3-5245-4f36-b37e-376a31c8ba85.png) The Config Context works well with a scrollbar: ![image](https://user-images.githubusercontent.com/52260120/194409998-37052220-0321-41b6-9626-9bdb3c8e4536.png) The JSON field is the most obvious offender as it's quite common for the text to be long, but other, more exaggerated, examples are given in the illustration. My suggestion would be to implement an automatic scrollbar if the content overflows for just the single field value, so that users don't have to scroll the entire panel and they don't have to scroll to access buttons that are justified to the right.
adam added the type: bugtopic: UI/UX labels 2025-12-29 20:19:04 +01:00
adam closed this issue 2025-12-29 20:19:04 +01:00
adam commented 2025-12-29 20:19:05 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 7, 2022):

Bootstrap provides utility classes to control how overflow is handled, however using them would require application to all potentially relevant areas. It might be prudent to just set overflow: scroll on all card bodies application-wide.

@jeremystretch commented on GitHub (Oct 7, 2022): Bootstrap provides [utility classes](https://getbootstrap.com/docs/5.0/utilities/overflow/) to control how overflow is handled, however using them would require application to _all_ potentially relevant areas. It might be prudent to just set `overflow: scroll` on all card bodies application-wide.
adam commented 2025-12-29 20:19:05 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 19, 2022):

Unfortunately the solution under PR #10621 (applying overflow-auto to all card bodies) interferes with dropdown menus within a card. Not sure what the optimal fix is here.

@jeremystretch commented on GitHub (Oct 19, 2022): Unfortunately the solution under PR #10621 (applying `overflow-auto` to all card bodies) interferes with dropdown menus within a card. Not sure what the optimal fix is here.
adam commented 2025-12-29 20:19:06 +01:00
Author
Owner
Copy Link

@arthanson commented on GitHub (Oct 28, 2022):

@jeremystretch can you provide a page where this shows the issue (where there is a dropdown menu within a card) and I will take a look.

@arthanson commented on GitHub (Oct 28, 2022): @jeremystretch can you provide a page where this shows the issue (where there is a dropdown menu within a card) and I will take a look.
adam commented 2025-12-29 20:19:06 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 31, 2022):

I've been recreating it by setting the description for a site to its max length using a string of As. The unbroken string pushes past the right hand boundary of the card (assuming a narrow enough browser window).

@jeremystretch commented on GitHub (Oct 31, 2022): I've been recreating it by setting the description for a site to its max length using a string of As. The unbroken string pushes past the right hand boundary of the card (assuming a narrow enough browser window).
adam commented 2025-12-29 20:19:06 +01:00
Author
Owner
Copy Link

@kkthxbye-code commented on GitHub (Oct 31, 2022):

@jeremystretch - I think he was asking for an example of the broken dropdown because of the initial fix.

@kkthxbye-code commented on GitHub (Oct 31, 2022): @jeremystretch - I think he was asking for an example of the broken dropdown because of the initial fix.
adam commented 2025-12-29 20:19:06 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 31, 2022):

Sorry, no coffee yet. IIRC I noticed it on the "connect" dropdown when viewing an unconnected interface.

@jeremystretch commented on GitHub (Oct 31, 2022): Sorry, no coffee yet. IIRC I noticed it on the "connect" dropdown when viewing an unconnected interface.
adam commented 2025-12-29 20:19:07 +01:00
Author
Owner
Copy Link

@arthanson commented on GitHub (Nov 4, 2022):

This (https://css-tricks.com/popping-hidden-overflow/) looks like it explains the issue, uses some javascript. Tried overflow-wrap: break-word; and overflow-x: auto to no avail... Not sure of a good solution for this yet.

@arthanson commented on GitHub (Nov 4, 2022): This (https://css-tricks.com/popping-hidden-overflow/) looks like it explains the issue, uses some javascript. Tried overflow-wrap: break-word; and overflow-x: auto to no avail... Not sure of a good solution for this yet.
adam commented 2025-12-29 20:19:07 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (May 2, 2023):

Closing this for inactivity. It's something we're sure to revisit under #12128.

@jeremystretch commented on GitHub (May 2, 2023): Closing this for inactivity. It's something we're sure to revisit under #12128.
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 topic: UI/UX 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#7089
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?