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

Use 100% of horizontal screen real estate for table pages #4122

New Issue
Closed
opened 2025-12-29 18:33:16 +01:00 by adam · 6 comments
adam commented 2025-12-29 18:33:16 +01:00
Owner
Copy Link

Originally created by @bluikko on GitHub (Sep 20, 2020).

Originally assigned to: @jeremystretch on GitHub.

Environment

  • Python version: 3.6.8
  • NetBox version: 2.9.3

Proposed Functionality

Use 100% of horizontal screen real estate for pages (at minimum pages with tables).

Currently pages with tables, for example "Virtual Machines" page, have quite large margins or whitespace at the left and right side of the pages.

I understand that this is a current trend in design but what does it contribute to usability of NetBox? If the page would utilize 100% of horizontal width then the tables could avoid wrapping text in cells to a second or third line, or additional columns could be fit. I counted roughly 15-20% of horizontal screen real estate is "wasted" to the margin at the sides of the page.

Screenshot of the margins highlighted in red:
image

Edit:

  • This proposal is to, at minimum, allow the vertical part of the page that has the data table to use 100% of the width. If the other parts (like the page header shown in above screenshot) does not use 100% that is not an issue.
  • Further, if the "Search" widget at the right side of the table could be "collapsed" when not needed to allow further 20-25% of horizontal screen real estate for the table would be nice but that might be more complex change.

Use Case

For tables with long text in cells or tables where additional columns have been added now do not fit horizontally on the screen due to the 15-20% margins.

Database Changes

Should be none? Should be just a CSS change?

External Dependencies

None?

Originally created by @bluikko on GitHub (Sep 20, 2020). Originally assigned to: @jeremystretch on GitHub. <!-- NOTE: IF YOUR ISSUE DOES NOT FOLLOW THIS TEMPLATE, IT WILL BE CLOSED. This form is only for proposing specific new features or enhancements. If you have a general idea or question, please post to our mailing list instead of opening an issue: https://groups.google.com/forum/#!forum/netbox-discuss NOTE: Due to an excessive backlog of feature requests, we are not currently accepting any proposals which significantly extend NetBox's feature scope. Please describe the environment in which you are running NetBox. Be sure that you are running an unmodified instance of the latest stable release before submitting a bug report. --> ### Environment * Python version: 3.6.8 * NetBox version: 2.9.3 <!-- Describe in detail the new functionality you are proposing. Include any specific changes to work flows, data models, or the user interface. --> ### Proposed Functionality Use 100% of horizontal screen real estate for pages (at minimum pages with tables). Currently pages with tables, for example "Virtual Machines" page, have quite large margins or whitespace at the left and right side of the pages. I understand that this is a current trend in design but what does it contribute to usability of NetBox? If the page would utilize 100% of horizontal width then the tables could avoid wrapping text in cells to a second or third line, or additional columns could be fit. I counted roughly 15-20% of horizontal screen real estate is "wasted" to the margin at the sides of the page. Screenshot of the margins highlighted in red: ![image](https://user-images.githubusercontent.com/14869000/93710945-871fae80-fb74-11ea-9b46-012afd4ba5fc.png) Edit: * This proposal is to, at minimum, allow the vertical part of the page that has the data table to use 100% of the width. If the other parts (like the page header shown in above screenshot) does not use 100% that is not an issue. * Further, if the "Search" widget at the right side of the table could be "collapsed" when not needed to allow further 20-25% of horizontal screen real estate for the table would be nice but that might be more complex change. <!-- Convey an example use case for your proposed feature. Write from the perspective of a NetBox user who would benefit from the proposed functionality and describe how. ---> ### Use Case For tables with long text in cells or tables where additional columns have been added now do not fit horizontally on the screen due to the 15-20% margins. <!-- Note any changes to the database schema necessary to support the new feature. For example, does the proposal require adding a new model or field? (Not all new features require database changes.) ---> ### Database Changes Should be none? Should be just a CSS change? <!-- List any new dependencies on external libraries or services that this new feature would introduce. For example, does the proposal require the installation of a new Python package? (Not all new features introduce new dependencies.) --> ### External Dependencies None?
adam added the status: acceptedtype: feature labels 2025-12-29 18:33:16 +01:00
adam closed this issue 2025-12-29 18:33:16 +01:00
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Sep 23, 2020):

I understand that this is a current trend in design but what does it contribute to usability of NetBox?

Tables with fewer columns are much more difficult to read when they are too wide.

@jeremystretch commented on GitHub (Sep 23, 2020): > I understand that this is a current trend in design but what does it contribute to usability of NetBox? Tables with fewer columns are much more difficult to read when they are too wide.
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@bluikko commented on GitHub (Sep 24, 2020):

Tables with fewer columns are much more difficult to read when they are too wide.

I see, yes this is a valid concern. Especially in the absence of alternating row background colors and in the absence of highlighting the row that cursor is hovering on.

The issue depends on several things:

  • Screen width / resolution
  • Font size
  • Number of columns
  • Length of data in the cells

For my FHD screen (1920x1080), at the default zoom of the web browser, several main tables wrap the text to two or even three lines even with default column setup. Arguable those are more difficult to read than cells that are not wrapped, and also take a lot of vertical space due to wrapping.

Would it be feasible to let wide tables overflow into the left/right margins?

Some other data-driven web apps have "widescreen mode" that reduces the margins but I'm not sure that's a good solution.

Edit: on 2.9.3 and with the data I have, all of the cramped tables have the Search widget at the right side. Large portion of "loose" tables do not have it. It might be enough if the search widget could be collapsed and then the left/right margins could stay consistent. Having said that, we might just narrow down the margins in the CSS locally, it should be simple enough to do.

@bluikko commented on GitHub (Sep 24, 2020): > Tables with fewer columns are much more difficult to read when they are too wide. I see, yes this is a valid concern. Especially in the absence of alternating row background colors and in the absence of highlighting the row that cursor is hovering on. The issue depends on several things: * Screen width / resolution * Font size * Number of columns * Length of data in the cells For my FHD screen (1920x1080), at the default zoom of the web browser, several main tables wrap the text to two or even three lines even with default column setup. Arguable those are more difficult to read than cells that are not wrapped, and also take a lot of vertical space due to wrapping. Would it be feasible to let wide tables overflow into the left/right margins? Some other data-driven web apps have "widescreen mode" that reduces the margins but I'm not sure that's a good solution. Edit: on 2.9.3 and with the data I have, all of the cramped tables have the Search widget at the right side. Large portion of "loose" tables do not have it. It might be enough if the search widget could be collapsed and then the left/right margins could stay consistent. Having said that, we might just narrow down the margins in the CSS locally, it should be simple enough to do.
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@bluikko commented on GitHub (Sep 24, 2020):

The issue is pronounced on a 4k screen:
image

@bluikko commented on GitHub (Sep 24, 2020): The issue is pronounced on a 4k screen: ![image](https://user-images.githubusercontent.com/14869000/94098530-03571200-fe53-11ea-9c2d-3dd854143798.png)
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Oct 15, 2020):

Conversely, here's how a table with few columns renders at full width on a 2560x1440 monitor:

screenshot

It's not ideal, but not terrible. It would be much worse on a 4K display with no scaling (but so would a lot of things).

The other issue is maintaining a sensible width ratio between the object list and right-hand panel (where present). Currently, the panel consumes 25% of the container width (three of 12 vertical columns). Bootstrap's highest built-in breakpoint is as 1200px, which isn't quite high enough to step it down to two columns. So, we'd need to define a custom breakpoint above which the proportion is adjusted.

@bluikko would you like to volunteer for this work?

@jeremystretch commented on GitHub (Oct 15, 2020): Conversely, here's how a table with few columns renders at full width on a 2560x1440 monitor: ![screenshot](https://user-images.githubusercontent.com/13487278/96155969-89a8c600-0ede-11eb-888c-e1e372cc8edf.png) It's not ideal, but not terrible. It would be much worse on a 4K display with no scaling (but so would a lot of things). The other issue is maintaining a sensible width ratio between the object list and right-hand panel (where present). Currently, the panel consumes 25% of the container width (three of 12 vertical columns). Bootstrap's highest built-in breakpoint is as 1200px, which isn't quite high enough to step it down to two columns. So, we'd need to define a custom breakpoint above which the proportion is adjusted. @bluikko would you like to volunteer for this work?
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@bluikko commented on GitHub (Oct 16, 2020):

@jeremystretch I have no experience in modern web technologies but I will read about bootstrap and try to understand what you are saying about breakpoints.

I take it that allowing the right-hand panel to be "collapsed" is not feasible,

@bluikko commented on GitHub (Oct 16, 2020): @jeremystretch I have no experience in modern web technologies but I will read about bootstrap and try to understand what you are saying about breakpoints. I take it that allowing the right-hand panel to be "collapsed" is not feasible,
adam commented 2025-12-29 18:33:16 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Nov 10, 2020):

Made this change for the upcoming v2.10 release.

@jeremystretch commented on GitHub (Nov 10, 2020): Made this change for the upcoming v2.10 release.
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 status: accepted 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#4122
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?