Crammed column views for mobile devices
Deployment Type
Self-hosted
NetBox Version
v4.1.1
Python Version
3.11
Steps to Reproduce
- Create a prefix (any family, any value)
- Open newly created prefix on a mobile device (≤1440px width at ≥440ppi)
- 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
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'
Screenshot showing the issue
I am happy to do a PR if such fix is sufficient (my branch: https://github.com/alryaz/netbox/tree/patch-column-widths )
@alryaz I'm assigning to you as it sounds like a you have a potential fix for a PR.