Set max width for object edit forms

netbox/project-static/styles/netbox.scss

@@ -647,6 +647,11 @@ span.color-label {
   }
 }
 
+.form-object-edit {
+  margin: 0 auto;
+  max-width: 800px;
+}
+
 textarea.form-control[rows='10'] {
   height: 18rem;
 }

netbox/templates/dcim/device_component_edit.html

@@ -4,7 +4,7 @@
 {% block form_fields %}
     {% if form.instance.device %}
         <div class="row mb-3">
-            <label class="col-sm-3 col-form-label">Device</label>
+            <label class="col-sm-3 col-form-label text-lg-end">Device</label>
             <div class="col">
                 <input class="form-control" value="{{ form.instance.device }}" disabled />
             </div>

netbox/templates/dcim/interface_edit.html

@@ -6,7 +6,7 @@
         <h4 class="mb-3">Interface</h4>
             {% if form.instance.device %}
                 <div class="row mb-3">
-                    <label class="col-sm-3 col-form-label required" for="id_device">Device</label>
+                    <label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Device</label>
                     <div class="col">
                         <input class="form-control" value="{{ form.instance.device }}" disabled />
                     </div>

netbox/templates/dcim/virtualchassis_edit.html

@@ -5,100 +5,94 @@
 {% block title %}{% if vc_form.instance %}Editing Virtual Chassis {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
 
 {% block content %}
-    <form action="" method="post" enctype="multipart/form-data" class="form form-horizontal">
+    <form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
         {% csrf_token %}
         {{ pk_form.pk }}
         {{ formset.management_form }}
-        <div class="row">
-            <div class="col col-md-8 offset-md-2">
-                <div class="card">
-                    <h5 class="card-header">Virtual Chassis</h5>
-                    <div class="card-body">
-                        {% render_field vc_form.name %}
-                        {% render_field vc_form.domain %}
-                        {% render_field vc_form.master %}
-                        {% render_field vc_form.tags %}
-                    </div>
+        <div class="card">
+            <h5 class="card-header">Virtual Chassis</h5>
+            <div class="card-body">
+                {% render_field vc_form.name %}
+                {% render_field vc_form.domain %}
+                {% render_field vc_form.master %}
+                {% render_field vc_form.tags %}
+            </div>
+        </div>
+        {% if vc_form.custom_fields %}
+            <div class="card">
+                <h5 class="card-header">Custom Fields</h5>
+                <div class="card-body">
+                    {% render_custom_fields vc_form %}
                 </div>
-                {% if vc_form.custom_fields %}
-                    <div class="card">
-                        <h5 class="card-header">Custom Fields</h5>
-                        <div class="card-body">
-                            {% render_custom_fields vc_form %}
-                        </div>
-                    </div>
-                {% endif %}
-                <div class="card">
-                    <h5 class="card-header">Members</h5>
-                    <div class="card-body">
-                        <table class="table">
-                            <thead>
+            </div>
+        {% endif %}
+        <div class="card">
+            <h5 class="card-header">Members</h5>
+            <div class="card-body">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Device</th>
+                            <th>ID</th>
+                            <th>Rack/Unit</th>
+                            <th>Serial</th>
+                            <th>Position</th>
+                            <th>Priority</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for form in formset %}
+                            {% for field in form.hidden_fields %}
+                                {{ field }}
+                            {% endfor %}
+                            {% with device=form.instance virtual_chassis=vc_form.instance %}
                                 <tr>
-                                    <th>Device</th>
-                                    <th>ID</th>
-                                    <th>Rack/Unit</th>
-                                    <th>Serial</th>
-                                    <th>Position</th>
-                                    <th>Priority</th>
-                                    <th></th>
+                                    <td>
+                                        <a href="{{ device.get_absolute_url }}">{{ device }}</a>
+                                    </td>
+                                    <td>{{ device.pk }}</td>
+                                    <td>
+                                        {% if device.rack %}
+                                            {{ device.rack }} / {{ device.position }}
+                                        {% else %}
+                                            <span class="text-muted">&mdash;</span>
+                                        {% endif %}
+                                    </td>
+                                    <td>{{ device.serial|placeholder }}</td>
+                                    <td>
+                                        {{ form.vc_position }}
+                                        {% if form.vc_position.errors %}
+                                            <br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        {{ form.vc_priority }}
+                                        {% if form.vc_priority.errors %}
+                                            <br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                        {% if virtual_chassis.pk %}
+                                            <a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
+                                                <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
+                                            </a>
+                                        {% endif %}
+                                    </td>
                                 </tr>
-                            </thead>
-                            <tbody>
-                                {% for form in formset %}
-                                    {% for field in form.hidden_fields %}
-                                        {{ field }}
-                                    {% endfor %}
-                                    {% with device=form.instance virtual_chassis=vc_form.instance %}
-                                        <tr>
-                                            <td>
-                                                <a href="{{ device.get_absolute_url }}">{{ device }}</a>
-                                            </td>
-                                            <td>{{ device.pk }}</td>
-                                            <td>
-                                                {% if device.rack %}
-                                                    {{ device.rack }} / {{ device.position }}
-                                                {% else %}
-                                                    <span class="text-muted">&mdash;</span>
-                                                {% endif %}
-                                            </td>
-                                            <td>{{ device.serial|placeholder }}</td>
-                                            <td>
-                                                {{ form.vc_position }}
-                                                {% if form.vc_position.errors %}
-                                                    <br /><small class="text-danger">{{ form.vc_position.errors.0 }}</small>
-                                                {% endif %}
-                                            </td>
-                                            <td>
-                                                {{ form.vc_priority }}
-                                                {% if form.vc_priority.errors %}
-                                                    <br /><small class="text-danger">{{ form.vc_priority.errors.0 }}</small>
-                                                {% endif %}
-                                            </td>
-                                            <td>
-                                                {% if virtual_chassis.pk %}
-                                                    <a href="{% url 'dcim:virtualchassis_remove_member' pk=device.pk %}?return_url={% url 'dcim:virtualchassis_edit' pk=virtual_chassis.pk %}" class="btn btn-danger btn-sm{% if virtual_chassis.master == device %} disabled{% endif %}">
-                                                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span>
-                                                    </a>
-                                                {% endif %}
-                                            </td>
-                                        </tr>
-                                    {% endwith %}
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
+                            {% endwith %}
+                        {% endfor %}
+                    </tbody>
+                </table>
             </div>
         </div>
-        <div class="row my-3">
-            <div class="col col-md-8 offset-md-2 text-end">
-                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-                {% if vc_form.instance.pk %}
-                    <button type="submit" name="_update" class="btn btn-primary">Save</button>
-                {% else %}
-                    <button type="submit" name="_create" class="btn btn-primary">Create</button>
-                {% endif %}
-            </div>
+        <div class="text-end">
+            <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+            {% if vc_form.instance.pk %}
+                <button type="submit" name="_update" class="btn btn-primary">Save</button>
+            {% else %}
+                <button type="submit" name="_create" class="btn btn-primary">Create</button>
+            {% endif %}
         </div>
     </form>
 {% endblock %}

netbox/templates/generic/object_edit.html

@@ -31,72 +31,66 @@
 {% block content-wrapper %}
   <div class="tab-content">
     <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">
-      <form action="" method="post" enctype="multipart/form-data">
+      <form action="" method="post" enctype="multipart/form-data" class="form-object-edit">
         {% csrf_token %}
-        {% for field in form.hidden_fields %}{{ field }}{% endfor %}
-
-        <div class="row">
-          <div class="col col-md-12 col-lg-10 offset-lg-1">
-            {% block form %}
-              {% if form.Meta.fieldsets %}
-
-                {# Render grouped fields according to Form #}
-                {% for group, fields in form.Meta.fieldsets %}
-                  <div class="field-group">
-                    <h5 class="text-center">{{ group }}</h5>
-                    {% for name in fields %}
-                        {% render_field form|getfield:name %}
-                    {% endfor %}
-                  </div>
+        {% for field in form.hidden_fields %}
+          {{ field }}
+        {% endfor %}
+
+        {% block form %}
+          {% if form.Meta.fieldsets %}
+
+            {# Render grouped fields according to Form #}
+            {% for group, fields in form.Meta.fieldsets %}
+              <div class="field-group">
+                <h5 class="text-center">{{ group }}</h5>
+                {% for name in fields %}
+                    {% render_field form|getfield:name %}
                 {% endfor %}
-
-                {% if form.custom_fields %}
-                  <div class="field-group">
-                    <h5 class="text-center">Custom Fields</h5>
-                    {% render_custom_fields form %}
-                  </div>
-                {% endif %}
-
-                {% if form.comments %}
-                  <div class="field-group">
-                    {% render_field form.comments label='Comments' %}
-                  </div>
-                {% endif %}
-
-              {% else %}
-                {# Render all fields in a single group #}
-                <div class="field-group">
-                  <h5 class="text-center">{{ obj_type|capfirst }}</h5>
-                  {% block form_fields %}{% render_form form %}{% endblock %}
-                </div>
-              {% endif %}
-
-            {% endblock form %}
-          </div>
-        </div>
-
-        <div class="row my-3">
-          <div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
-            {% block buttons %}
-              <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
-
-              {% if obj.pk %}
-                <button type="submit" name="_update" class="btn btn-primary">
-                  Save
-                </button>
-
-              {% else %}
-                <button type="submit" name="_addanother" class="btn btn-outline-primary">
-                  Create & Add Another
-                </button>
-                <button type="submit" name="_create" class="btn btn-primary">
-                  Create
-                </button>
-
-              {% endif %}
-
-            {% endblock buttons %}
-          </div>
+              </div>
+            {% endfor %}
+
+            {% if form.custom_fields %}
+              <div class="field-group">
+                <h5 class="text-center">Custom Fields</h5>
+                {% render_custom_fields form %}
+              </div>
+            {% endif %}
+
+            {% if form.comments %}
+              <div class="field-group">
+                {% render_field form.comments label='Comments' %}
+              </div>
+            {% endif %}
+
+          {% else %}
+            {# Render all fields in a single group #}
+            <div class="field-group">
+              <h5 class="text-center">{{ obj_type|capfirst }}</h5>
+              {% block form_fields %}{% render_form form %}{% endblock %}
+            </div>
+          {% endif %}
+
+        {% endblock form %}
+
+        <div class="text-end my-3">
+          {% block buttons %}
+            <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
+
+            {% if obj.pk %}
+              <button type="submit" name="_update" class="btn btn-primary">
+                Save
+              </button>
+            {% else %}
+              <button type="submit" name="_addanother" class="btn btn-outline-primary">
+                Create & Add Another
+              </button>
+              <button type="submit" name="_create" class="btn btn-primary">
+                Create
+              </button>
+            {% endif %}
+
+          {% endblock buttons %}
         </div>
       </form>
     </div>

netbox/templates/virtualization/vminterface_edit.html

@@ -6,7 +6,7 @@
         <h5 class="text-center">Interface</h5>
         {% if form.instance.virtual_machine %}
             <div class="row mb-3">
-                <label class="col-sm-3 col-form-label required" for="id_device">Virtual Machine</label>
+                <label class="col-sm-3 col-form-label text-lg-end required" for="id_device">Virtual Machine</label>
                 <div class="col">
                     <input class="form-control" value="{{ form.instance.virtual_machine }}" disabled />
                 </div>
@@ -36,12 +36,12 @@
 {% endblock %}
 
 {% block buttons %}
-    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-{% if obj.pk %}
+  <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+  {% if obj.pk %}
     <button type="submit" formaction="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
     <button type="submit" name="_update" class="btn btn-primary">Save</button>
-{% else %}
+  {% else %}
     <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
     <button type="submit" name="_create" class="btn btn-primary">Create</button>
-{% endif %}
+  {% endif %}
 {% endblock %}