Crammed column views for mobile devices #10298

Closed
opened 2025-12-29 21:29:35 +01:00 by adam · 4 comments
Owner

Originally created by @alryaz on GitHub (Sep 26, 2024).

Originally assigned to: @arthanson on GitHub.

Deployment Type

Self-hosted

NetBox Version

v4.1.1

Python Version

3.11

Steps to Reproduce

  1. Create a prefix (any family, any value)
  2. Open newly created prefix on a mobile device (≤1440px width at ≥440ppi)
  3. Columns appear horizontally

Expected Behavior

All columns display vertically (one above the other)

Observed Behavior

Columns behave horizontally, text overlaps (for lengthy values)

Additional information

This is the result of using class="col col-md-6". An opportunity for improvement lies within adding col-12 to the class list.

This likely applies to the following templates:

  • users/objectpermission.html
  • users/user.html
  • users/group.html
  • users/token.html
  • generic/confirmation_form.html
  • extras/object_configcontext.html
  • extras/webhook.html
  • extras/tag.html
  • extras/customfield.html
  • extras/customfieldchoiceset.html
  • extras/eventrule.html
  • extras/notificationgroup.html
  • ipam/vrf.html
  • ipam/routetarget.html
  • ipam/prefix.html
  • ipam/asn.html
  • ipam/rir.html
  • ipam/vlan.html
  • ipam/asnrange.html
  • ipam/servicetemplate.html
  • ipam/fhrpgroup.html
  • ipam/role.html
  • ipam/vlangroup.html
  • ipam/aggregate.html
  • ipam/service.html
  • ipam/iprange.html
  • virtualization/virtualmachine.html
  • virtualization/virtualdisk.html
  • virtualization/vminterface.html
  • virtualization/cluster_add_devices.html
  • virtualization/clustergroup.html
  • virtualization/clustertype.html
  • virtualization/cluster.html
  • core/objectchange.html
  • core/datasource.html
  • core/job.html
  • vpn/ipsecproposal.html
  • vpn/ikeproposal.html
  • vpn/tunneltermination.html
  • vpn/l2vpn.html
  • vpn/l2vpntermination.html
  • vpn/tunnelgroup.html
  • vpn/ipsecpolicy.html
  • vpn/ipsecprofile.html
  • vpn/ikepolicy.html
  • vpn/tunnel.html
  • dcim/devicetype.html
  • dcim/sitegroup.html
  • dcim/rack.html
  • dcim/interface.html
  • dcim/site.html
  • dcim/powerport.html
  • dcim/platform.html
  • dcim/moduletype.html
  • dcim/virtualdevicecontext.html
  • dcim/rackrole.html
  • dcim/powerpanel.html
  • dcim/region.html
  • dcim/consoleserverport.html
  • dcim/frontport.html
  • dcim/modulebay.html
  • dcim/rearport.html
  • dcim/poweroutlet.html
  • dcim/manufacturer.html
  • dcim/inventoryitemrole.html
  • dcim/inventoryitem.html
  • dcim/rackreservation.html
  • dcim/devicebay.html
  • dcim/device.html
  • dcim/devicerole.html
  • dcim/cable.html
  • dcim/devicebay_populate.html
  • dcim/module.html
  • dcim/consoleport.html
  • dcim/powerfeed.html
  • dcim/location.html
  • wireless/wirelesslan.html
  • wireless/wirelesslangroup.html
  • wireless/wirelesslink.html
  • tenancy/contactgroup.html
  • tenancy/tenantgroup.html
  • tenancy/contactrole.html
  • account/profile.html
  • circuits/circuittype.html
  • circuits/circuitgroup.html
  • circuits/provider.html
  • circuits/circuittermination.html
  • circuits/provideraccount.html
  • circuits/circuit.html
  • circuits/circuitgroupassignment.html
  • circuits/providernetwork.html
Originally created by @alryaz on GitHub (Sep 26, 2024). Originally assigned to: @arthanson on GitHub. ### Deployment Type Self-hosted ### NetBox Version v4.1.1 ### Python Version 3.11 ### Steps to Reproduce 1. Create a prefix (any family, any value) 2. Open newly created prefix on a mobile device (≤1440px width at ≥440ppi) 3. Columns appear horizontally ### Expected Behavior All columns display vertically (one above the other) ### Observed Behavior Columns behave horizontally, text overlaps (for lengthy values) ## Additional information This is the result of using `class="col col-md-6"`. An opportunity for improvement lies within adding `col-12` to the class list. This likely applies to the following templates: - users/objectpermission.html - users/user.html - users/group.html - users/token.html - generic/confirmation_form.html - extras/object_configcontext.html - extras/webhook.html - extras/tag.html - extras/customfield.html - extras/customfieldchoiceset.html - extras/eventrule.html - extras/notificationgroup.html - ipam/vrf.html - ipam/routetarget.html - ipam/prefix.html - ipam/asn.html - ipam/rir.html - ipam/vlan.html - ipam/asnrange.html - ipam/servicetemplate.html - ipam/fhrpgroup.html - ipam/role.html - ipam/vlangroup.html - ipam/aggregate.html - ipam/service.html - ipam/iprange.html - virtualization/virtualmachine.html - virtualization/virtualdisk.html - virtualization/vminterface.html - virtualization/cluster_add_devices.html - virtualization/clustergroup.html - virtualization/clustertype.html - virtualization/cluster.html - core/objectchange.html - core/datasource.html - core/job.html - vpn/ipsecproposal.html - vpn/ikeproposal.html - vpn/tunneltermination.html - vpn/l2vpn.html - vpn/l2vpntermination.html - vpn/tunnelgroup.html - vpn/ipsecpolicy.html - vpn/ipsecprofile.html - vpn/ikepolicy.html - vpn/tunnel.html - dcim/devicetype.html - dcim/sitegroup.html - dcim/rack.html - dcim/interface.html - dcim/site.html - dcim/powerport.html - dcim/platform.html - dcim/moduletype.html - dcim/virtualdevicecontext.html - dcim/rackrole.html - dcim/powerpanel.html - dcim/region.html - dcim/consoleserverport.html - dcim/frontport.html - dcim/modulebay.html - dcim/rearport.html - dcim/poweroutlet.html - dcim/manufacturer.html - dcim/inventoryitemrole.html - dcim/inventoryitem.html - dcim/rackreservation.html - dcim/devicebay.html - dcim/device.html - dcim/devicerole.html - dcim/cable.html - dcim/devicebay_populate.html - dcim/module.html - dcim/consoleport.html - dcim/powerfeed.html - dcim/location.html - wireless/wirelesslan.html - wireless/wirelesslangroup.html - wireless/wirelesslink.html - tenancy/contactgroup.html - tenancy/tenantgroup.html - tenancy/contactrole.html - account/profile.html - circuits/circuittype.html - circuits/circuitgroup.html - circuits/provider.html - circuits/circuittermination.html - circuits/provideraccount.html - circuits/circuit.html - circuits/circuitgroupassignment.html - circuits/providernetwork.html
adam added the type: bugstatus: acceptednetboxseverity: low labels 2025-12-29 21:29:35 +01:00
adam closed this issue 2025-12-29 21:29:35 +01:00
Author
Owner

@alryaz commented on GitHub (Sep 26, 2024):

Quick fix I applied to my installation:
find netbox/templates/ -type f -name \*.html -print0 | xargs -0 sed -i 's/"col col-md-6"/"col col-12 col-md-6"/g'

@alryaz commented on GitHub (Sep 26, 2024): Quick fix I applied to my installation: `find netbox/templates/ -type f -name \*.html -print0 | xargs -0 sed -i 's/"col col-md-6"/"col col-12 col-md-6"/g'`
Author
Owner

@arthanson commented on GitHub (Sep 26, 2024):

Screenshot showing the issue
10 112 0 0:15 | NetBox 2024-09-26 07-53-43

@arthanson commented on GitHub (Sep 26, 2024): Screenshot showing the issue ![10 112 0 0:15 | NetBox 2024-09-26 07-53-43](https://github.com/user-attachments/assets/2ef7754f-cb7b-4393-8e5b-b5f9d4395162)
Author
Owner

@alryaz commented on GitHub (Sep 30, 2024):

I am happy to do a PR if such fix is sufficient (my branch: https://github.com/alryaz/netbox/tree/patch-column-widths )

@alryaz commented on GitHub (Sep 30, 2024): I am happy to do a PR if such fix is sufficient (my branch: https://github.com/alryaz/netbox/tree/patch-column-widths )
Author
Owner

@arthanson commented on GitHub (Oct 10, 2024):

@alryaz I'm assigning to you as it sounds like a you have a potential fix for a PR.

@arthanson commented on GitHub (Oct 10, 2024): @alryaz I'm assigning to you as it sounds like a you have a potential fix for a PR.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#10298