[HxAutosuggest] Validation messages overlay fix - z-indexes

havit · Jan 9, 2024 · 832de25 · 832de25
1 parent 2af4716
commit 832de25
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 14 deletions.
diff --git a/...Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInputInternal.razor.css b/...Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInputInternal.razor.css
@@ -2,16 +2,6 @@
     position: relative;
 }
 
-/* Unfocused input z-index: 4 same as Bootstrap form-controls */
-.input-group .hx-autosuggest-input.is-invalid:not(:focus) {
-    z-index: 4;
-}
-
-/* Bring the "active" form control to the top of surrounding elements */
-.input-group .hx-autosuggest-input:focus {
-    z-index: 5;
-}
-
 .form-control.is-invalid {
     background-position: center right 2.5rem;
     padding-right: 4.125rem;

diff --git a/...azor.Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInternal.razor.css b/...azor.Components.Web.Bootstrap/Forms/Autosuggests/Internal/HxAutosuggestInternal.razor.css
@@ -6,7 +6,10 @@
     top: 50%;
     right: 0;
     transform: translateY(-50%);
-    z-index: 5;
+}
+
+.hx-autosuggest-input-wrapper:focus-within {
+	z-index: 6;
 }
 
 .input-group .hx-autosuggest-input-wrapper {
@@ -32,7 +35,4 @@
 
 .hx-autosuggest-input-icon div[role="button"]:not(:hover) ::deep .hx-icon {
     opacity: var(--hx-autosuggest-input-close-icon-opacity);
-}
-::deep .form-floating > label {
-    z-index: 20;
 }