1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. FloatLabelType unsetting the row height

FloatLabelType unsetting the row height

Hello,

The FloatLabelType is unsetting the row height. In this example the textbox with the FloatLabelType=Auto property as the combobox misalign.

What can be the solution to maintain alignment?

 <div class="form-row" style="margin-bottom: 10px;">

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

            @Html.EJS().TextBox("Bairro").Placeholder("Bairro").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

      </div>

        <div class="control-section col-md-2">

            @Html.EJS().DropDownList("EstadoId").Change("changeEstado").ShowClearButton(true).AllowFiltering(true).Width("100%").Placeholder("UF").DataSource((IEnumerable<Object>)ViewBag.estado).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings

            { Text = "Sigla", Value = "EstadoId" }

            ).Render()

        </div>

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

            @Html.EJS().DropDownList("MunicipioId").Enabled(false).ShowClearButton(true).AllowFiltering(true).Filtering("filterMunicipios").Width("100%").Placeholder("Município").DataSource((IEnumerable<Object>)ViewBag.municipio).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings

            { Text = "Municipio", Value = "MunicipioId" }

            ).Render()

        </div>

        <div class="control-section col-md-2">

            @Html.EJS().TextBox("Cep").Placeholder("CEP").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

        </div>

    </div>

Image_6775_1693510816096

_Layout

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewData["Title"] - MYPROJECT </title>

    <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="~/css/site.css" asp-append-version="true" />

    <link rel="stylesheet" rel='nofollow' href="~/MYPROJECT.styles.css" asp-append-version="true" />

    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/22.2.9/material.css" />

    <script src="~/js/ej2/ej2.min.js"></script>

    <script src="https://cdn.syncfusion.com/ej2/22.2.9/dist/ej2.min.js"></script>

    <link rel="stylesheet" rel='nofollow' href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />


Thanks.



1 Reply 1 reply marked as answer
KP Kokila Poovendran Syncfusion Team September 1, 2023 03:58 PM UTC

Hi Fernando,


Greetings from Syncfusion Support!


We've taken a close look at the issue you reported regarding the FloatLabelType affecting row height alignment. After our investigation, we've identified the root cause of this problem. It appears that the issue arises due to the margin-top style being applied to the float input element. To address this, we have provided a CSS snippet that you can apply to resolve the alignment issue. Please find the code snippet below:


<div class="form-row"style="margin-bottom: 10px;">

 

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

 

        @Html.EJS().TextBox("Bairro").Placeholder("Bairro").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).ShowClearButton(true).Render()

 

    </div>

 

    <div class="control-section col-md-2">

 

        @Html.EJS().DropDownList("EstadoId").ShowClearButton(true).AllowFiltering(true).Width("100%").Placeholder("UF").DataSource((IEnumerable<Object>)ViewBag.estado).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings

 

        { Text = "Sigla", Value = "EstadoId" }

 

        ).Render()

 

    </div>

 

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

 

        @Html.EJS().DropDownList("MunicipioId").Enabled(false).ShowClearButton(true).AllowFiltering(true).Width("100%").Placeholder("Município").DataSource((IEnumerable<Object>)ViewBag.municipio).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings

 

        { Text = "Municipio", Value = "MunicipioId" }

 

        ).Render()

 

    </div>

 

    <div class="control-section col-md-2">

 

        @Html.EJS().TextBox("Cep").Placeholder("CEP").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

 

    </div>

 

</div>

 

<style>

 

    .e-float-input, .e-float-input.e-control-wrapper{

        margin-top: 0px !important;

    }

</style>


You can include this CSS snippet in your project to override the margin-top style and ensure proper alignment for the input elements with the FloatLabelType property set to Auto.



Regards,

Kokila Poovendran.


Marked as answer
Loader.
Up arrow icon