Problem with floating label

[????? ????????]

I am using this html: 

<div class="row">

    <div class="col-md-4">

        <form asp-action="Create">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <ejs-textbox id="title" placeholder="Title" value="Title" floatLabelType="Always"/>

                <span asp-validation-for="Title" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Icon" class="control-label"></label>

                <input asp-for="Icon" class="form-control" />

                <span asp-validation-for="Icon" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Type" class="control-label"></label>

                <input asp-for="Type" class="form-control" />

                <span asp-validation-for="Type" class="text-danger"></span>

            </div>

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

</div>

And the problem is that the Label is too small and too far away from the Textbox. How do i fix that? 

Thank you 

[Kokila Poovendran]

Hi Sir,

Thank you for reaching out to us and providing your HTML code snippet. We understand that you are facing challenges with the float label styling in your form, specifically regarding the font size and positioning.

Upon reviewing your code, we have prepared a sample to demonstrate a solution to the issues you raised. Here is a screenshot of the output:

The default font size for the float label is set to "13px." If you wish to customize the font size, you can use the following code snippet:

.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,

.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {

  font-size: 15px;

}

 

For more details on styling the floating label, you can refer to our documentation here: https://ej2.syncfusion.com/angular/documentation/textbox/how-to/change-the-floating-label-color-of-the-textbox

Regarding the concern about the label being too far away from the textbox, our analysis indicates that the label is correctly positioned above the textbox. However, to further investigate and address any remaining issues or concerns, we kindly request you to provide additional details or, if possible, share a video illustration of the problem.

You can also explore the API documentation here for more information on the float label type.

To assist you better, we have created a sample for you on StackBlitz: https://stackblitz.com/edit/angular-ss3fwx-m11t67?file=src%2Fapp.component.html,src%2Fapp.component.css

If you have any further questions or encounter any difficulties, please feel free to reach out. We are here to help and ensure your experience with Syncfusion is seamless.