How to use TexBox

[slow MS]

If you use the following source code

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox Placeholder="First Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox EnableRtl="true" Placeholder="Last Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
            </div>
        </div>

 


What I want is as shown in the picture below. 
Please tell me the source to make this using Syncfusion

​

​

[UdhayaKumar Duraisamy]

You can use the HTML table and the CSS class below to achieve your requirement. Please refer to the code snippet shared below for more information.

@using Syncfusion.Blazor.Inputs

 

<table>

    <tr>

        <th>ID</th>

        <td>

            <div>

                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">

                    <SfTextBox Placeholder="First Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

                </div>

            </div>

        </td>

    </tr>

    <tr>

        <th>PW</th>

        <td>

            <div>

                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">

                    <SfTextBox EnableRtl="true" Placeholder="Last Name" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

                </div>

            </div>

        </td>

    </tr>

</table>

 

<style>

    .e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {

        margin-top: 0;

    }

 

    table {

        border-collapse: collapse;

        width: 100%;

        padding: 10px;

    }

 

    th, td {

        padding-top: 40px

    }

    th{

        width:50px;

    }

</style>

[slow MS]

thanks.

Your help has been a great help to me.

[UdhayaKumar Duraisamy]

We are glad the suggestion helped you to achieve your requirement. Please let us know if you need further assistance.