#6372: Improve form field styles

netbox/project-static/styles/netbox.scss

@@ -628,8 +628,10 @@ pre {
   .card-header + .card-body {
     padding-top: 0;
   }
-  .card-body {
+
-    overflow-x: auto;
+  .card-body.small .form-control,
+  .card-body.small .form-select {
+    font-size: $input-font-size-sm;
   }
 }
 

netbox/project-static/styles/select.scss

@@ -60,7 +60,6 @@ $spacing-s: $input-padding-x;
   div.ss-multi-selected .ss-values .ss-disabled,
   div.ss-single-selected span.placeholder .ss-disabled {
     color: var(--nbx-select-placeholder-color);
-    font-size: $form-select-font-size;
   }
 
   .ss-single-selected {

netbox/templates/generic/object_bulk_edit.html

@@ -7,12 +7,15 @@
 {% block content %}
 <form action="" method="post" class="form form-horizontal">
     {% csrf_token %}
+
     {% if request.POST.return_url %}
         <input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
     {% endif %}
+
     {% for field in form.hidden_fields %}
         {{ field }}
     {% endfor %}
+
     <div class="row mb-3">
         <div class="col col-md-8">
           {% include 'inc/table.html' %}
@@ -20,7 +23,7 @@
         <div class="col col-md-4">
             <div class="card">
                 <h5 class="card-header">{% block form_title %}Attributes{% endblock %}</h5>
-                <div class="card-body">
+                <div class="card-body small">
                     {% for field in form.visible_fields %}
                         {% if field.name in form.nullable_fields %}
                             {% render_field field bulk_nullable=True %}
@@ -30,12 +33,12 @@
                     {% endfor %}
                 </div>
                 <div class="card-footer text-end">
-                    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+                    <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
-                    <button type="submit" name="_apply" class="btn btn-primary">Apply</button>
+                    <button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
                 </div>
             </div>
-		    
         </div>
     </div>
+
 </form>
 {% endblock content %}

netbox/templates/utilities/render_field.html

@@ -2,34 +2,40 @@
 {% load helpers %}
 
 {% if field|widget_type == 'checkboxinput' %}
-    <div class="mb-3">
+    <div class="row mb-3">
-        <div class="form-check{% if field.errors %} has-error{% endif %}">
+        <div class="col">
-            {{ field }}
+            <div class="form-check{% if field.errors %} has-error{% endif %}">
-            <label for="{{ field.id_for_label }}" class="form-check-label">
+                {{ field }}
-                {{ field.label }}
+                <label for="{{ field.id_for_label }}" class="form-check-label">
-            </label>
+                    {{ field.label }}
+                </label>
+            </div>
+            {% if field.help_text %}
+                <span class="form-text">{{ field.help_text|safe }}</span>
+            {% endif %}
+            {% if bulk_nullable %}
+                <div class="form-check my-1">
+                    <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
+                    <label class="form-check-label">Set Null</label>
+                </div>
+            {% endif %}
         </div>
-        {% if field.help_text %}
-        <span class="form-text">{{ field.help_text|safe }}</span>
-        {% endif %}
-        {% if bulk_nullable %}
-        <label class="form-check-label">
-            <input class="form-check-input" type="checkbox" name="_nullify" value="{{ field.name }}" /> Set null
-        </label>
-        {% endif %}
     </div>
 
 {% elif field|widget_type == 'textarea' and not field.label %}
-    <div class="mb-3">
+    <div class="row mb-3">
-        {{ field }}
+        <div class="col">
-        {% if bulk_nullable %}
+            {{ field }}
-        <label class="checkbox-inline">
+            {% if field.help_text %}
-            <input type="checkbox" name="_nullify" value="{{ field.name }}" /> Set null
+                <span class="form-text">{{ field.help_text|safe }}</span>
-        </label>
+            {% endif %}
-        {% endif %}
+            {% if bulk_nullable %}
-        {% if field.help_text %}
+                <div class="form-check my-1">
-        <span class="form-text">{{ field.help_text|safe }}</span>
+                    <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
-        {% endif %}
+                    <label class="form-check-label">Set Null</label>
+                </div>
+            {% endif %}
+        </div>
     </div>
 
 {% elif field|widget_type == 'slugwidget' %}
@@ -94,6 +100,12 @@
         </label>
         <div class="col col-md-9">
             {{ field }}
+            {% if bulk_nullable %}
+                <div class="form-check my-1">
+                    <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
+                    <label class="form-check-label">Set Null</label>
+                </div>
+            {% endif %}
         </div>
     </div>
 
@@ -112,18 +124,13 @@
                     <strong>{{ field.label }}</strong> field is required.
                 {% endif %}
             </div>
+            {% if bulk_nullable %}
+                <div class="form-check my-1">
+                    <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
+                    <label class="form-check-label">Set Null</label>
+                </div>
+            {% endif %}
         </div>
     </div>
-    
 {% endif %}
 
-{% if bulk_nullable %}
-    <div class="form-check">
-        <input type="checkbox" class="form-check-input" name="_nullify" value="{{ field.name }}" />
-        <label class="form-check-label">Set Null</label>
-    </div>
-
-    {% if field.help_text %}
-        <span class="form-text">{{ field.help_text|safe }}</span>
-    {% endif %}
-{% endif %}