fix table config modal styles

netbox/templates/dcim/device/frontports.html

@@ -11,7 +11,7 @@
                 <h5>Front Ports</h5>
                 <div class="float-end noprint">
                 {% if request.user.is_authenticated %}
-                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceFrontPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                    <button type="button" class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#DeviceFrontPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
                 {% endif %}
                 </div>
             </div>
@@ -24,7 +24,7 @@
                         <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
                     <button type="submit" name="_edit" formaction="{% url 'dcim:frontport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-warning btn-sm">
-                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
+                        <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit
                     </button>
                     <button type="submit" name="_disconnect" formaction="{% url 'dcim:frontport_bulk_disconnect' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-outline-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
@@ -32,13 +32,13 @@
                 {% endif %}
                 {% if perms.dcim.delete_frontport %}
                     <button type="submit" formaction="{% url 'dcim:frontport_bulk_delete' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-danger btn-sm">
-                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
+                        <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_frontport %}
                     <div class="float-end">
                         <a href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-primary btn-sm">
-                            <i class="bi bi-plus" aria-hidden="true"></i> Add front ports
+                            <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add front ports
                         </a>
                     </div>
                 {% endif %}

netbox/templates/dcim/device/rearports.html

@@ -11,7 +11,7 @@
                 <h5>Rear Ports</h5>
                 <div class="float-end noprint">
                 {% if request.user.is_authenticated %}
-                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceRearPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                    <button type="button" class="btn btn-outline-dark btn-sm" data-bs-toggle="modal" data-bs-target="#DeviceRearPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
                 {% endif %}
                 </div>
             </div>
@@ -24,7 +24,7 @@
                         <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
                     <button type="submit" name="_edit" formaction="{% url 'dcim:rearport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-warning btn-sm">
-                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
+                        <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit
                     </button>
                     <button type="submit" name="_disconnect" formaction="{% url 'dcim:rearport_bulk_disconnect' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-outline-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
@@ -32,13 +32,13 @@
                 {% endif %}
                 {% if perms.dcim.delete_rearport %}
                     <button type="submit" formaction="{% url 'dcim:rearport_bulk_delete' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-danger btn-sm">
-                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
+                        <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_rearport %}
                     <div class="float-end">
                         <a href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-primary btn-sm">
-                            <i class="bi bi-plus" aria-hidden="true"></i> Add rear ports
+                            <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Add rear ports
                         </a>
                     </div>
                 {% endif %}

netbox/templates/utilities/render_field.html

@@ -93,6 +93,15 @@
     />
     <label for="{{ field.id_for_label }}" class="input-group-text">{{ field.label|bettertitle }}</label>
 </div>
+{% elif field|widget_type == 'selectmultiple' %}
+<div class="row">
+    <label for="{{ field.id_for_label }}" class="form-label col-md-3{% if field.field.required %} required{% endif %}">
+        {{ field.label }}
+    </label>
+    <div class="col-md-9">
+        {{ field }}
+    </div>
+</div>
 {% else %}
     <div class="form-floating mb-3">
         {{ field }}

netbox/templates/utilities/templatetags/table_config_form.html

@@ -1,33 +1,37 @@
 {% load form_helpers %}
 <div class="modal fade" tabindex="-1" id="{{ table_name }}_config">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title">Table Configuration</h4>
+                <h5 class="modal-title">Table Configuration</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body">
-                <form class="form-horizontal userconfigform" data-config-root="tables.{{ table_config_form.table_name }}">
+            <form class="form-horizontal userconfigform" data-config-root="tables.{{ table_config_form.table_name }}">
+                <div class="modal-body">
                     {% render_field table_config_form.available_columns %}
-                    <div class="form-group">
-                        <div class="col-md-9 col-md-offset-3">
-                            <a class="btn btn-success btn-xs" id="add_columns"><i class="mdi mdi-arrow-down-bold"></i> Add columns</a>
-                            <a class="btn btn-danger btn-xs" id="remove_columns"><i class="mdi mdi-arrow-up-bold"></i> Remove columns</a>
+                    <div class="row my-3">
+                        <div class="col-md-9 offset-md-3">
+                            <a class="btn btn-success btn-sm" id="add_columns"><i class="mdi mdi-arrow-down-bold"></i> Add Columns</a>
+                            <a class="btn btn-danger btn-sm" id="remove_columns"><i class="mdi mdi-arrow-up-bold"></i> Remove Columns</a>
                         </div>
                     </div>
                     {% render_field table_config_form.columns %}
-                    <div class="form-group">
-                        <div class="col-md-9 col-md-offset-3">
-                            <a class="btn btn-primary btn-xs" id="move-option-up" data-target="id_columns"><i class="mdi mdi-arrow-up-bold"></i> Move up</a>
-                            <a class="btn btn-primary btn-xs" id="move-option-down" data-target="id_columns"><i class="mdi mdi-arrow-down-bold"></i> Move down</a>
+                    <div class="row my-3">
+                        <div class="col-md-9 offset-md-3">
+                            <a class="btn btn-primary btn-sm" id="move-option-up" data-target="id_columns">
+                                <i class="mdi mdi-arrow-up-bold"></i> Move Up
+                            </a>
+                            <a class="btn btn-primary btn-sm" id="move-option-down" data-target="id_columns">
+                                <i class="mdi mdi-arrow-down-bold"></i> Move Down
+                            </a>
                         </div>
                     </div>
-                    <div class="text-right">
-                        <input type="submit" class="btn btn-primary" id="save_tableconfig" value="Save" />
-                        <input type="submit" class="btn btn-danger" id="reset_tableconfig" value="Reset" />
-                    </div>
-                </form>
-            </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-outline-danger" id="reset_tableconfig" value="Reset">Reset</button>
+                    <button type="submit" class="btn btn-primary" id="save_tableconfig" value="Save">Save</button>
+                </div>
+            </form>
         </div>
     </div>
 </div>

netbox/utilities/forms/forms.py

@@ -177,17 +177,17 @@ class TableConfigForm(BootstrapMixin, forms.Form):
         choices=[],
         required=False,
         widget=forms.SelectMultiple(
-            attrs={'size': 10}
+            attrs={'size': 10, 'class': 'form-select'}
         ),
-        label='Available columns'
+        label='Available Columns'
     )
     columns = forms.MultipleChoiceField(
         choices=[],
         required=False,
         widget=forms.SelectMultiple(
-            attrs={'size': 10}
+            attrs={'size': 10, 'class': 'form-select'}
         ),
-        label='Selected columns'
+        label='Selected Columns'
     )
 
     def __init__(self, table, *args, **kwargs):