HxMultiSelect, HxSearch, HxAutosuggset - dropdown menu width changed …

…to min-width + css vars
havit · Jun 24, 2024 · d7f8265 · d7f8265
1 parent b37d0d1
commit d7f8265
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 4 deletions.
diff --git a/...Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestItemsInternal.razor.css b/...Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestItemsInternal.razor.css
@@ -1,5 +1,5 @@
 .dropdown-menu {
-    width: var(--hx-autosuggest-dropdown-menu-width);
+    min-width: var(--hx-autosuggest-dropdown-menu-width);
     overflow: auto;
     max-height: var(--hx-autosuggest-dropdown-menu-height);
 }

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css
@@ -3,7 +3,7 @@
 }
 
 .dropdown-menu {
-    width: 100%;
+    min-width: var(--hx-multi-select-dropdown-menu-width);
     overflow: auto;
     max-height: var(--hx-multi-select-dropdown-menu-height);
 }

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css
@@ -3,7 +3,7 @@
 }
 
 ::deep .dropdown-menu {
-    width: 100%; /* override for current .btn-group, see issue #117 */
+    min-width: var(--hx-search-box-dropdown-menu-width); /* override for current .btn-group, see issue #117 */
 }
 
 ::deep .hx-search-box-input-icon {

diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
@@ -145,6 +145,7 @@
 	--hx-multi-select-background-color: 							var(--bs-body-bg);
 	--hx-multi-select-dropdown-menu-height: 						300px;
 	--hx-multi-select-filter-input-icon-opacity: 					.25;
+	--hx-multi-select-dropdown-menu-width: 							100%;
 
 	/* TagInput */
 	--hx-input-tags-tag-margin: 									0 .25rem 0 0;
@@ -196,6 +197,7 @@
 	--hx-search-box-item-subtitle-font-size: 						.75rem;
 	--hx-search-box-item-highlighted-background-color: 				var(--bs-tertiary-bg);
 	--hx-search-box-dropdown-menu-height: 							300px;
+	--hx-search-box-dropdown-menu-width: 							100%;
 	--hx-search-box-input-search-icon-color:						unset;
 	--hx-search-box-input-clear-icon-color:							unset;
 }

diff --git a/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor b/....Blazor.Documentation/Pages/Components/HxAutosuggestDoc/HxAutosuggest_Documentation.razor
@@ -39,7 +39,7 @@
             Maximum height of the results dropdown menu.
         </ComponentApiDocCssVariable>
         <ComponentApiDocCssVariable Name="--hx-autosuggest-dropdown-menu-width" Default="100%">
-            Width of the results dropdown menu.
+            Minimal width of the results dropdown menu.
         </ComponentApiDocCssVariable>
         <ComponentApiDocCssVariable Name="--hx-autosuggest-input-search-icon-color" Default="unset">
             Color of the search icon.

diff --git a/....Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor b/....Blazor.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor
@@ -34,6 +34,9 @@
 		<ComponentApiDocCssVariable Name="--hx-multi-select-dropdown-menu-height" Default="300px">
 			Height of the dropdown menu.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-multi-select-dropdown-menu-width" Default="100%">
+			Minimal width of the dropdown menu.
+		</ComponentApiDocCssVariable>
 
 		<ComponentApiDocCssVariable Name="--hx-multi-select-background-color" Default="var(--bs-body-bg)">
 			Background color of the dropdown menu.

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSearchBoxDoc/HxSearchBox_Documentation.razor
@@ -66,5 +66,8 @@
         <ComponentApiDocCssVariable Name="--hx-search-box-input-clear-icon-color" Default="unset">
             Color of the clear icon.
         </ComponentApiDocCssVariable>
+        <ComponentApiDocCssVariable Name="--hx-search-box-dropdown-menu-width" Default="100%">
+            Minimal width of the results dropdown menu.
+        </ComponentApiDocCssVariable>
 	</CssVariables>
 </ComponentApiDoc>