[HxSearchBox] Search icon missaligned when used with label #487

havit · Mar 3, 2023 · ef2fcee · ef2fcee
1 parent 9934174
commit ef2fcee
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 35 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor
@@ -13,44 +13,39 @@
                                  OnHidden="HandleDropdownMenuHidden"
                                  id="@dropdownToggleElementId">
 
-            <div class="position-relative">
-                @if (!string.IsNullOrEmpty(Label))
+            @if (!string.IsNullOrEmpty(Label))
+            {
+                <label class="form-label">@Label</label>
+            }
+            <div class="@CssClassHelper.Combine(
+                            "position-relative",
+                            (HasInputGroupsEffective ? "input-group" : null),
+                            (LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "form-floating" : null,
+                            InputSizeEffective.AsInputGroupCssClass(),
+                            InputGroupCssClass)">
+
+                @if (InputGroupStartText is not null)
                 {
-                    <label class="form-label">@Label</label>
+                    <span class="input-group-text">@InputGroupStartText</span>
                 }
-                <span class="@CssClassHelper.Combine(
-                                (HasInputGroupsEffective ? "input-group" : null),
-                                (LabelType == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "form-floating" : null,
-                                InputSizeEffective.AsInputGroupCssClass(),
-                                InputGroupCssClass)">
-
-                    @if (InputGroupStartText is not null)
-                    {
-                        <span class="input-group-text">@InputGroupStartText</span>
-                    }
-
-                    @InputGroupStartTemplate
 
-                    <input
-                        id="@inputId"
-                        value="@TextQuery"
-                        @oninput="(eventArgs) => HandleTextQueryValueChanged(eventArgs.Value.ToString())"
-                        @onfocus="HandleInputFocus"
-                        @onblur="HandleInputBlur"
-                        inputmode="search"
-                        enabled="@Enabled"
-                        placeholder="@Placeholder"
-                        class="@CssClassHelper.Combine("form-control", InputCssClassEffective)" />
-
-                    @InputGroupEndTemplate
+                @InputGroupStartTemplate
 
-                    @if (InputGroupEndText is not null)
-                    {
-                        <span class="input-group-text">@InputGroupEndText</span>
-                    }
-                </span>
+                <input
+                    id="@inputId"
+                    value="@TextQuery"
+                    @oninput="(eventArgs) => HandleTextQueryValueChanged(eventArgs.Value.ToString())"
+                    @onfocus="HandleInputFocus"
+                    @onblur="HandleInputBlur"
+                    inputmode="search"
+                    enabled="@Enabled"
+                    placeholder="@Placeholder"
+                    class="@CssClassHelper.Combine(
+                       "form-control",
+                       (ShowSearchIconEffective && HasInputGroupsEffective ? "hx-search-box-input-with-search-icon" : null),
+                       InputCssClassEffective)" />
 
-                @if (InputGroupEndText is null && InputGroupEndTemplate is null)
+                @if (ShowSearchIconEffective)
                 {
                     if (dataProviderInProgress)
                     {
@@ -71,6 +66,13 @@
                         </div>
                     }
                 }
+
+                @InputGroupEndTemplate
+
+                @if (InputGroupEndText is not null)
+                {
+                    <span class="input-group-text">@InputGroupEndText</span>
+                }
             </div>
         </HxDropdownToggleElement>
 

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.cs
@@ -210,6 +210,7 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 	[Inject] protected IJSRuntime JSRuntime { get; set; }
 
 	protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null);
+	private bool ShowSearchIconEffective => (InputGroupEndText is null) && (InputGroupEndTemplate is null);
 
 	private string dropdownToggleElementId = "hx" + Guid.NewGuid().ToString("N");
 	private string dropdownId = "hx" + Guid.NewGuid().ToString("N");
@@ -229,7 +230,6 @@ public partial class HxSearchBox<TItem> : IAsyncDisposable
 	private IJSObjectReference jsModule;
 	private DotNetObjectReference<HxSearchBox<TItem>> dotnetObjectReference;
 	private bool disposed = false;
-
 	public HxSearchBox()
 	{
 		dotnetObjectReference = DotNetObjectReference.Create(this);

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor.css
@@ -10,13 +10,18 @@
     transform: translateY(-50%);
     display: flex;
     align-items: center;
-    z-index: 1;
+    z-index: 10;
 }
 
 ::deep .hx-search-box-input-icon-end {
     right: .75rem;
 }
 
+::deep .hx-search-box-input-with-search-icon {
+    border-top-right-radius: 0.375rem !important;
+    border-bottom-right-radius: 0.375rem !important;
+}
+
 .dropdown-item:not(:active) ::deep .hx-search-box-item-title {
     color: var(--hx-search-box-item-title-color);
 }