Fixes #725 [HxInputDate] [HxInputDateRange] Some fragments (eg. float…

…ing label placeholder) render over dropdown calendar (z-index?)
havit · Jan 9, 2024 · 2af4716 · 2af4716
1 parent c3949d1
commit 2af4716
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateInternal.razor
@@ -70,12 +70,12 @@
 					</div>
 				}
 			</HxDropdownContent>
+			@if (RenderIcon)
+			{
+				<div @ref="iconWrapperElement" class="hx-input-date-icon">
+					<HxIcon Icon="CalendarIconEffective" />
+				</div>
+			}
 		</HxDropdown>
-		@if (RenderIcon)
-		{
-			<div @ref="iconWrapperElement" class="hx-input-date-icon">
-				<HxIcon Icon="CalendarIconEffective" />
-			</div>
-		}
 	</div>
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateInternal.razor.css
@@ -48,11 +48,6 @@
 	font-size: .75rem;
 }
 
-.hx-input-date-icon,
-::deep .form-floating label {
-	z-index: 10;
-}
-
 .hx-input-date-wrapper {
 	width: 100%;
 	display: flex;
@@ -64,4 +59,8 @@
 	flex-grow: 1;
 	flex-shrink: 1;
 	min-width: 0;
+}
+
+::deep .dropdown:focus-within {
+    z-index: 6; /* Assures that the inputs' box shadows are always fully visible (rendered on top). Must be larger than 5 because otherwise the validation message is rendered on top. */
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateRangeInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxInputDateRangeInternal.razor.css
@@ -25,8 +25,6 @@
     flex: 1 0 50%;
 }
 
-::deep .dropdown:focus-within,
-::deep .dropdown:has(.is-invalid),
-::deep .dropdown:has(.is-valid) {
+::deep .dropdown:focus-within {
     z-index: 6; /* Assures that the inputs' box shadows are always fully visible (rendered on top). Must be larger than 5 because otherwise the validation message is rendered on top. */
 }