Floating Label is being centered above textbox

[John Meyer]

I thought I followed your examples, but the floating text label for textboxes are showing the label centered above the textbox rather than left-aligned. I don't see any alignment options.  Can you tell me what I need to do to get the label left-aligned?

Here is the razor code I am using:

                        <SfTextBox Value="@product.ProductNo" Placeholder="Prod No." FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

[Sevvandhi Nagulan]

Hi John, 

 

 

Greetings from Syncfusion support. 

 

 

We checked the reported requirement. We suspect you provided the text-align: center for the div element. If it does, set the text-align: left for the control wrapper. Refer to the code below, 

 

 

    <div style="text-align:center"> 

        <SfTextBox Value="@product" Placeholder="Prod No." FloatLabelType="@FloatLabelType.Auto"></SfTextBox> 

    </div> 

 

    

 

@code{ 

 

    public string product { get; set; } = "First Name"; 

 

} 

 

<style> 

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

        text-align: left; 

    } 

</style> 

 

If still issue persists, kindly revert us with the control rendering code to proceed further. 

 

Regards, 

Sevvandhi N