Styling SfTextBox

[Thijs van Rijswijk]

Goodmorning,

I build a component with one MaskedTextBox and two Textboxes.

<div>

    <SfMaskedTextBox @ref="PhoneNumberObj"

                     CssClass="e-style"

                     Placeholder="Telefoonnummer..."

                     Mask="0000000000"

                     ValueChange="@OnPhoneNumberChange"

                     @onkeypress="@OnPhoneNumberKeyPressed"

                     @bind-Value="@PhoneNumber" />

</div>

<div class="myVisitorSpaceRow" />

<div>

    <SfTextBox @ref="NameObj"

               CssClass="text-custom2"

               Placeholder="Naam..."

               ValueChange="@OnNameChange"

               @onkeypress="@OnNameKeyPressed"

               @bind-Value="@Name" />

</div>

<div class="myVisitorSpaceRow" />

<div>

    <SfTextBox @ref="CompanyObj"

               CssClass="text-custom2"

               Placeholder="Bedrijf..."

               ValueChange="@OnCompanyChange"

               @onkeypress="@OnCompanyKeyPressed"

               @bind-Value="@Company" />

</div>

.myVisitorSpaceRow {

    width: 100%;

    height: 15px;

}

.e-mask.e-style .e-control.e-maskedtextbox {

    height: 60px;

    font-size: xx-large;

    border: 4px;

    border-color: #ffffff;

    border-radius: 4px;

}

.e-input-group.e-control-wrapper.text-custom2 {

    height: 60px;

    color: #000000;

    font-size: xx-large;

    border: 4px;

    border-color: #ffffff;

    border-radius: 4px;

}

The styling of the masked textbox look fine and the text is vertical centered the normal textboxes not.

How can i achieve the same styling for the textboxes?

And where can i find the .css styling information for the control?

Thanks in advance and best regards.

Thijs van Rijswijk

[Sevvandhi Nagulan]

Hi Thijs, 

Greetings from Syncfusion support. 

You can align the placeholder in center for the TextBox component using the below css code. Refer to the code below, 

<style> 

    .myVisitorSpaceRow { 

        width: 100%; 

        height: 15px; 

    } 

 

    .e-mask.e-style .e-control.e-maskedtextbox { 

        height: 60px; 

        font-size: xx-large; 

        border: 4px; 

        border-color: #ffffff; 

        border-radius: 4px; 

    } 

 

    .e-input-group.e-control-wrapper.text-custom2 { 

        height: 60px; 

        color: #000000; 

        font-size: xx-large; 

        border: 4px; 

        border-color: #ffffff; 

        border-radius: 4px; 

        align-items: center; 

    } 

</style> 

 

The reported requirement("CSS structure customization”) for adding it to the Ug documentation correction has already been considered. It will be included in the volume 3 release which is expected to be rolled out on end of September. 

Screenshot:  

 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1773965591 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Thijs van Rijswijk]

Hi,

It's working fine now.

Thanks.

Thijs van Rijswijk

[Sevvandhi Nagulan]

Hi Thijs,

We are glad to hear that our solution got worked. Please get back to us if you have any queries.

Regards,
Sevvandhi N 

[Stefan Heimbach]

Hi Thijs, 

Greetings from Syncfusion support. 

You can align the placeholder in center for the TextBox component using the below css code. Refer to the code below, 

<style> 

    .myVisitorSpaceRow { 

        width: 100%; 

        height: 15px; 

    } 

 

    .e-mask.e-style .e-control.e-maskedtextbox { 

        height: 60px; 

        font-size: xx-large; 

        border: 4px; 

        border-color: #ffffff; 

        border-radius: 4px; 

    } 

 

    .e-input-group.e-control-wrapper.text-custom2 { 

        height: 60px; 

        color: #000000; 

        font-size: xx-large; 

        border: 4px; 

        border-color: #ffffff; 

        border-radius: 4px; 

        align-items: center; 

    } 

</style> 

 

The reported requirement("CSS structure customization”) for adding it to the Ug documentation correction has already been considered. It will be included in the volume 3 release which is expected to be rolled out on end of September. 

Screenshot:  

 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1773965591 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

"The reported requirement("CSS structure customization”) for adding it to the Ug documentation correction has already been considered. It will be included in the volume 3 release which is expected to be rolled out on end of September. "

So where can I find it?

Thanks

[Sevvandhi Nagulan]

Hi Stefan, 

Sorry for the inconvenience caused.   

Due to the complexity, it is not included this patch release. We will provide high priority and include the requested requirement in the Volume 1 2021 release which is expected to be rolled out on March 17^th,2021.  We appreciate your patience until then.   

  

Regards, 

Sevvandhi N