mvc/view: Ensure fields stay aligned relatively to another when heade…

…rs are used in forms (#8364) * mvc/view: Ensure fields stay aligned relatively to another when headers are used in forms. * mvc/view: Add style that forces consistency in smaller viewport sizes in base forms. * mvc/view: Make classes more selective so the style does not leak when modal-dialog and form-inline exist in the same view (e.g. dnsmasq). * mvc/view: Ensure the change in base_dialog is backwards compatible when msgzone_width is defined (e.g. in Intrusion Detection)
opnsense · Feb 28, 2025 · 387c381 · 387c381
1 parent 81ec980
commit 387c381
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 16 deletions.
diff --git a/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt b/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
@@ -1,5 +1,5 @@
 {#
- # Copyright (c) 2014-2015 Deciso B.V.
+ # Copyright (c) 2014-2025 Deciso B.V.
  # All rights reserved.
  #
  # Redistribution and use in source and binary forms, with or without modification,
@@ -66,11 +66,17 @@
             <div class="modal-body">
                 <form id="frm_{{base_dialog_id}}">
                   <div class="table-responsive">
-                    <table class="table table-striped table-condensed">
+                    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
                         <colgroup>
+                        {% if msgzone_width is defined %}
                             <col class="col-md-3"/>
-                            <col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
-                            <col class="col-md-{{ msgzone_width|default(5) }}"/>
+                            <col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
+                            <col class="col-md-{{ msgzone_width }}"/>
+                        {% else %}
+                            <col style="width: 25%;" />
+                            <col style="width: 40%;" />
+                            <col style="width: 35%;" />
+                        {% endif %}
                         </colgroup>
                         <tbody>
                         {%  if base_dialog_advanced|default(false) or base_dialog_help|default(false) %}
@@ -100,11 +106,17 @@
     </table>
   </div>
   <div class="table-responsive {{field['style']|default('')}}">
-    <table class="table table-striped table-condensed">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
+        {% if msgzone_width is defined %}
             <col class="col-md-3"/>
-            <col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
-            <col class="col-md-{{ msgzone_width|default(5) }}"/>
+            <col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
+            <col class="col-md-{{ msgzone_width }}"/>
+        {% else %}
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
+        {% endif %}
         </colgroup>
         <thead style="cursor: pointer;">
           <tr{% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@@ -144,3 +156,11 @@
         </div>
     </div>
 </div>
+
+{# Ensure all fields stay the same width relative to each other inside the modal #}
+<style>
+    .modal-dialog .bootstrap-select:not(.bs-container),
+    .modal-dialog .tokenize ul.tokens-container {
+        width: 100% !important;
+    }
+</style>
diff --git a/src/opnsense/mvc/app/views/layout_partials/base_form.volt b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
@@ -1,5 +1,5 @@
 {#
- # Copyright (c) 2014-2015 Deciso B.V.
+ # Copyright (c) 2014-2025 Deciso B.V.
  # All rights reserved.
  #
  # Redistribution and use in source and binary forms, with or without modification,
@@ -52,11 +52,11 @@
 {% endfor %}
 <form id="{{base_form_id}}" class="form-inline" data-title="{{data_title|default('')}}">
   <div class="table-responsive">
-    <table class="table table-striped table-condensed">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
-            <col class="col-md-3"/>
-            <col class="col-md-4"/>
-            <col class="col-md-5"/>
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
         </colgroup>
         <tbody>
 {% if advanced|default(false) or help|default(false) %}
@@ -78,11 +78,11 @@
     </table>
   </div>
   <div class="table-responsive {{field['style']|default('')}}">
-    <table class="table table-striped table-condensed table-responsive">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
-            <col class="col-md-3"/>
-            <col class="col-md-4"/>
-            <col class="col-md-5"/>
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
         </colgroup>
         <thead style="cursor: pointer;" class="{{field['style']|default('')}}">
           <tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@@ -116,3 +116,14 @@
     </table>
   </div>
 </form>
+
+{# Ensure all fields stay the same width relative to each other inside the modal #}
+<style>
+  @media (max-width: 760px) {
+    .form-inline .bootstrap-select:not(.bs-container),
+    .form-inline .tokenize ul.tokens-container {
+      width: 100% !important;
+      min-width: 0 !important;
+    }
+  }
+</style>