From dd1b4f3bc3ec3a534686e17ff0d231c9ee200245 Mon Sep 17 00:00:00 2001
From: Yevgeny Tomenko <skie@mail.ru>
Date: Sat, 12 Oct 2024 00:41:21 +0300
Subject: [PATCH] fix styles for select2 type for select filters

---
 templates/element/Search/v_templates.php |  4 ++--
 webroot/css/default.css                  | 25 ++++++++++++++++++++++++
 webroot/css/inline.css                   | 25 ++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/templates/element/Search/v_templates.php b/templates/element/Search/v_templates.php
index 8e61678..77cfc12 100644
--- 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
index 4cd6c7d..8b911d0 100644
--- 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
index 8ea9c4b..9738b28 100644
--- 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;
+}