Text box floating label styling

[Klaus Kirchhoff]

I'm in the process of creating a component derived from SfTextBox to set certain properties!

I adjusted the style, the height of SfTextBox was set to 40px and colors were defined.

The following problem still exists, the floating label is not placed correctly, it is too close to the top edge,

and if there is an icon in the text box on the left, then it will be moved.

In addition, the label is not displayed vertically centered within the text box (see image)

<div @key="@_componentKey">

<SfTextBox

CssClass="e-custom e-outline"

@ref=@TextBoxObj

Placeholder="@Placeholder"

@bind-Value="@Value"

Type="@Type"

ShowClearButton="true"

FloatLabelType="@FloatLabelType"

Created="@AddDateIcon" />

</div>

@code {

#region Protected

private Guid _componentKey;

protected override void OnAfterRender(bool firstRender)

{

if (firstRender)

{

_componentKey = Guid.NewGuid();

}

}

#endregion

#region Parameters

[Parameter] public string Placeholder { get; set; } = string.Empty;

[Parameter] public string Value { get; set; } = string.Empty;

[Parameter] public InputType Type { get; set; } = InputType.Text;

[Parameter] public FloatLabelType FloatLabelType { get; set; } = FloatLabelType.Auto;

[Parameter] public bool ShowClearButton { get; set; } = true;

#endregion Parameters

SfTextBox? TextBoxObj { get; set; }

private async Task AddDateIcon()

{

if (TextBoxObj != null)

{

//Add icon to the TextBox

await TextBoxObj.AddIconAsync("prepend", "e-icons e-date-icon");

await TextBoxObj.AddIconAsync("append", "e-icons e-date-icon");

_hasPrependIcon = true;

}

}

private bool _hasPrependIcon;

private string FlotingLabelMove => _hasPrependIcon ? "28px" : "0";

}

<style>

.e-custom .e-control.e-textbox{

height: 40px;

color: var(--jb24-primary);

font-size: var(--jb24-font-size);

align-items: center;

}

.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,

.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {

color: var(--jb24-primary);

transform: translate(@FlotingLabelMove, -15px);

}

</style>

[Klaus Kirchhoff]

In my opinion there is a problem with the processing of images within the text box. Whenever an image is added via "AddIconAsync", the layout is no longer displayed correctly. Especially in connection with the floting label, as can be seen in the picture, the Focus line can be seen twice!

[Yohapuja Selvakumaran]

Hi Klaus Kirchhoff,

Thank you for reaching out to us.

Instead of manually setting the height for the component, we provide a direct option to adjust the size of the TextBox component. You can make the TextBox appear small, normal, or bigger by using the corresponding CssClass. To display the TextBox in a larger size, you can apply the e-bigger class to the component.

Code Snippet:

 

<SfTextBox  @ref=@TextBoxObj Placeholder="Demo" Width="200px" CssClass="e-bigger" Created="@AddDateIcon" ></SfTextBox>

 

Additionally, we have prepared a sample that demonstrates how to append and prepend a date icon to the TextBox component. You can explore the sample using the link below:

Sample: https://blazorplayground.syncfusion.com/VNrfChsmLBxKgiNs

For more details about sizing the TextBox component, you can refer to our official documentation:

Documentation: https://blazor.syncfusion.com/documentation/textbox/sizing

Regards,

Yohapuja S