#6372: Form should be centered on page

netbox/templates/base/layout.html

@@ -94,11 +94,12 @@
 
               {# Title #}
               <div id="content-title">
-                <h1 class="h2 w-100">{% block title %}{% endblock %}</h1>
+                {# Center-align title in object-edit views #}
+                <h1 class="h2 w-100{% if form or vc_form %} text-center{% endif %}">{% block title %}{% endblock title %}</h1>
               </div>
 
               {# Controls #}
-              {% block controls %}{% endblock %}
+              {% block controls %}{% endblock controls %}
 
             </div>
           {% endblock header %}

netbox/templates/circuits/circuittermination_edit.html

@@ -5,52 +5,48 @@
 {% block title %}{{ obj.circuit.provider }} {{ obj.circuit }} - Side {{ form.term_side.value }}{% endblock %}
 
 {% block form %}
-  <div class="card">
-      <h5 class="card-header">Termination</h5>
-      <div class="card-body">
-          <div class="form-floating mb-3">
-              <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
-              <label>Provider</label>
-          </div>
-          <div class="form-floating mb-3">
-              <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
-              <label>Circuit</label>
-          </div>
-          <div class="form-floating mb-3">
-              <input class="form-control" value="{{ form.term_side.value }}" disabled />
-              <label>Termination</label>
-          </div>
-          {% render_field form.mark_connected %}
-          {% with providernetwork_tab_active=form.initial.provider_network %}
-              <ul class="nav nav-tabs mb-3" role="tablist">
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
-                </li>
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
-                </li>
-              </ul>
-              <div class="tab-content">
-                  <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
-                      {% render_field form.region %}
-                      {% render_field form.site_group %}
-                      {% render_field form.site %}
-                  </div>
-                  <div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
-                      {% render_field form.provider_network %}
-                  </div>
-              </div>
-          {% endwith %}
-      </div>
+  <div class="field-group">
+    <h4 class="mb-3">Termination</h4>
+        <div class="form-floating mb-3">
+            <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
+            <label>Provider</label>
+        </div>
+        <div class="form-floating mb-3">
+            <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
+            <label>Circuit</label>
+        </div>
+        <div class="form-floating mb-3">
+            <input class="form-control" value="{{ form.term_side.value }}" disabled />
+            <label>Termination</label>
+        </div>
+        {% render_field form.mark_connected %}
+        {% with providernetwork_tab_active=form.initial.provider_network %}
+            <ul class="nav nav-tabs mb-3" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
+            </li>
+            </ul>
+            <div class="tab-content">
+                <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
+                    {% render_field form.region %}
+                    {% render_field form.site_group %}
+                    {% render_field form.site %}
+                </div>
+                <div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
+                    {% render_field form.provider_network %}
+                </div>
+            </div>
+        {% endwith %}
   </div>
-  <div class="card">
-      <h5 class="card-header">Termination Details</h5>
-      <div class="card-body">
-          {% render_field form.port_speed %}
-          {% render_field form.upstream_speed %}
-          {% render_field form.xconnect_id %}
-          {% render_field form.pp_info %}
-          {% render_field form.description %}
-      </div>
+  <div class="field-group">
+    <h4 class="mb-3">Termination Details</h4>
+        {% render_field form.port_speed %}
+        {% render_field form.upstream_speed %}
+        {% render_field form.xconnect_id %}
+        {% render_field form.pp_info %}
+        {% render_field form.description %}
   </div>
 {% endblock %}

netbox/templates/dcim/interface_edit.html

@@ -2,44 +2,38 @@
 {% load form_helpers %}
 
 {% block form %}
-    <div class="card">
-        <div class="card-header">Interface</div>
-        <div class="card-body">
+    <div class="field-group">
+        <h4 class="mb-3">Interface</h4>
             {% if form.instance.device %}
-            <div class="form-floating mb-3">
-                <input class="form-control" value="{{ form.instance.device }}" disabled />
-                <label class="form-label required" for="id_device">Device</label>
-            </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control" value="{{ form.instance.device }}" disabled />
+                    <label class="form-label required" for="id_device">Device</label>
+                </div>
             {% endif %}
-            {% render_field form.name %}
-            {% render_field form.label %}
-            {% render_field form.type %}
-            {% render_field form.enabled %}
-            {% render_field form.parent %}
-            {% render_field form.lag %}
-            {% render_field form.mac_address %}
-            {% render_field form.mtu %}
-            {% render_field form.mgmt_only %}
-            {% render_field form.mark_connected %}
-            {% render_field form.description %}
-            {% render_field form.tags %}
-        </div>
+        {% render_field form.name %}
+        {% render_field form.label %}
+        {% render_field form.type %}
+        {% render_field form.enabled %}
+        {% render_field form.parent %}
+        {% render_field form.lag %}
+        {% render_field form.mac_address %}
+        {% render_field form.mtu %}
+        {% render_field form.mgmt_only %}
+        {% render_field form.mark_connected %}
+        {% render_field form.description %}
+        {% render_field form.tags %}
     </div>
-    <div class="card">
-        <div class="card-header">802.1Q Switching</div>
-        <div class="card-body">
-            {% render_field form.mode %}
-            {% render_field form.untagged_vlan %}
-            {% render_field form.tagged_vlans %}
-        </div>
+    <div class="field-group">
+        <h4 class="mb-3">802.1Q Switching</h4>
+        {% render_field form.mode %}
+        {% render_field form.untagged_vlan %}
+        {% render_field form.tagged_vlans %}
     </div>
     {% if form.custom_fields %}
-      <div class="card">
-        <div class="card-header">Custom Fields</div>
-        <div class="card-body">
-          {% render_custom_fields form %}
+        <div class="field-group">
+            <h4 class="mb-3">Custom Fields</h4>
+            {% render_custom_fields form %}
         </div>
-      </div>
     {% endif %}
 {% endblock %}
 

netbox/templates/dcim/virtualchassis_edit.html

@@ -2,7 +2,7 @@
 {% load helpers %}
 {% load form_helpers %}
 
-{% block title %}{% if vc_form.instance %}Editing {{ vc_form.instance }}{% else %}New Virtual Chassis{% endif %}{% endblock %}
+{% 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">
@@ -10,7 +10,7 @@
         {{ pk_form.pk }}
         {{ formset.management_form }}
         <div class="row">
-            <div class="col col-md-8">
+            <div class="col col-md-8 offset-md-2">
                 <div class="card">
                     <h5 class="card-header">Virtual Chassis</h5>
                     <div class="card-body">
@@ -91,7 +91,7 @@
             </div>
         </div>
         <div class="row my-3">
-            <div class="col col-md-8 col col-md-offset-2 text-end">
+            <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>

netbox/templates/generic/object_edit.html

@@ -1,6 +1,8 @@
 {% extends 'base/layout.html' %} {% load form_helpers %} {% load helpers %}
 
-{% block title %}{% if obj.pk %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new {{ obj_type }}{% endif %}{% endblock %}
+{% block title %}
+  {% if obj.pk %}Editing {{ obj_type }} {{ obj }}{% else %}Add a new {{ obj_type }}{% endif %}
+{% endblock title %}
 
 {% block controls %}
   {% if settings.DOCS_ROOT %}
@@ -15,7 +17,7 @@
   {% csrf_token %}
   {% for field in form.hidden_fields %}{{ field }}{% endfor %}
   <div class="row">
-    <div class="col col-md-8">
+    <div class="col col-md-8 offset-md-2">
       {% block tabs %}{% endblock %}
       {% block form %}
       {% if form.Meta.fieldsets %}
@@ -51,7 +53,7 @@
     </div>
   </div>
   <div class="row my-3">
-    <div class="col col-md-8 text-end">
+    <div class="col col-md-8 offset-md-2 text-end">
       {% block buttons %}
       <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
       {% if obj.pk %}

netbox/templates/ipam/ipaddress_assign.html

@@ -3,7 +3,7 @@
 {% load form_helpers %}
 {% load helpers %}
 
-{% block title %}Assign an IP Address{% endblock %}
+{% block title %}Assign an IP Address{% endblock title %}
 
 {% block content %}
     <form action="{% querystring request %}" method="post" class="form form-horizontal">
@@ -12,7 +12,7 @@
             {{ field }}
         {% endfor %}
         <div class="row mb-3">
-            <div class="col col-md-6">
+            <div class="col col-md-8 offset-md-2">
                 {% include 'ipam/inc/ipadress_edit_header.html' with active_tab='assign' %}
                 <div class="card">
                     <h5 class="card-header">Select IP Address</h5>
@@ -24,7 +24,7 @@
             </div>
         </div>
         <div class="row mb-3">
-            <div class="col col-md-6 text-end">
+            <div class="col col-md-8 offset-md-2 text-end">
                 <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
                 <button type="submit" class="btn btn-primary">Search</button>
             </div>