fix styles for select2 type for select filters

CakeDC · Oct 11, 2024 · dd1b4f3 · dd1b4f3
1 parent e9ef16a
commit dd1b4f3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/templates/element/Search/v_templates.php b/templates/element/Search/v_templates.php
@@ -177,8 +177,8 @@ class="form-control value"
 </script>
 
 <script type="text/x-template" id="search-select2-template">
-  <div>
-    <select class="form-control" :id="id" :name="name" :disabled="disabled" :required="required"></select>
+  <div class="select2-wrapper">
+    <select class="form-control select2-control" :id="id" :name="name" :disabled="disabled" :required="required"></select>
   </div>
 </script>
 

diff --git a/webroot/css/default.css b/webroot/css/default.css
@@ -390,3 +390,28 @@
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
+
+.select2-container {
+    min-width: 150px;
+    width: auto !important;
+}
+
+.select2-container .select2-selection--single,
+.select2-container .select2-selection--multiple {
+    min-width: 150px;
+    width: auto;
+}
+
+.select2-dropdown {
+    min-width: 150px;
+    width: auto !important;
+}
+
+.select2-results__options {
+    white-space: nowrap;
+}
+
+.select2-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+}
diff --git a/webroot/css/inline.css b/webroot/css/inline.css
@@ -408,3 +408,28 @@
 .hidden {
     display: none !important;
 }
+
+.search-filter-item .select2-container {
+    width: auto !important;
+    min-width: 150px;
+}
+
+.search-filter-item .select2-selection {
+    width: 100%;
+}
+
+.select2-dropdown {
+    max-width: none !important;
+}
+
+.select2-results__options {
+    max-height: 150px;
+    overflow-y: auto;
+    white-space: normal;
+    word-break: break-word;
+}
+
+.select2-results__option {
+    white-space: normal;
+    word-wrap: break-word;
+}