How not to apply e-error and e-success classes on OnFocus

[Mr Andrey Voronov]

e-error class is applied when user focus empty SfTextBox, once user enters some text into it, and selects another text box, e-success class will apply. Very often empty value is valid value, but users are getting confused and start thinking there is something wrong.

Is there any way to disable that default implementation? I would like to apply those classes manually on submit event.

[Sevvandhi Nagulan]

Hi Andrey, 

 

Greetings from Syncfusion support. 

 

We have validated the reported requirement. And we would like to let you know that default built-in validation will be occurred for Syncfusion TextBox component and e-success and e-error class will be added based on the component’s value. So, please share the faced issue details due to the default built-in validation or use case requirement for removing the default validation that will help us to check and proceed further at our end.  

 

Regards, 

Sevvandhi N. 

[Mr Andrey Voronov]

For example, here are two text boxes "Optional Value 1" and "Optional Value 2", both accepting empty string as a valid value

The requirement is to remove "e-error" style when each text box got focused. Otherwise it creates confusion among users that they actually need to type a value in that box 

Better solution in this case would be to use thick grey line instead of red.

[Sevvandhi Nagulan]

Hi Andrey,  

You can change the textbox focusing color by overriding the below mentioned class.  

 

<SfTextBox></SfTextBox> 

 

<style> 

 

    .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { 

        background-color: #93949a; 

    } 

</style> 

 

Screenshot:  

 

Regards,  

Sevvandhi N  

[Mr Andrey Voronov]

Does not work in 18.3.53

I need the same border colour regardless focus, hover, success, warning and error

This works when textbox initially displayed:

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

border-color: blueviolet;

}

I just need to keep the same border colour no matter what  

[Ponmani Murugaiyan]

Hi Andrey, 

Thanks for the update. 

As per your requirement, we have overriding the below mentioned class. Please find the override styles and sample below. 

/* Initial loading and hovering*/ 

.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 

   border-color: blueviolet; 

} 

 

/*While focus in*/ 

.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { 

   background-color: blueviolet; 

} 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox1141872749  

Kindly check with the above sample to meet your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Mr Andrey Voronov]

This works indeed:

<SfTextBox CssClass="test"></SfTextBox>

But this still does not:

<SfTextBox FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

[Ponmani Murugaiyan]

Hi Andrey,  

Thanks for the update.  

As per your requirement, we have modified the sample. Please find the override styles and sample below. 

<style> 

    /* Initial loading and hovering*/ 

    .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 

        border-color: blueviolet; 

    } 

 

    /*While focus in floatlabeltye Auto*/ 

    .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after, 

    .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after { 

        background: blueviolet; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox-1235309649  

Regards, 

Ponmani M 

[Mr Andrey Voronov]

Now this works:

<SfTextBox FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

But this does not:

<SfTextBox></SfTextBox>

Syncfusion e-* classes are ridiculously complicated to work with. Is there any way to make CssClass settings automatically override e-* classes? 

This would be an ideal solution:

<SfTextBox CssClass="custom"></SfTextBox>

<style>

.custom {

     border-color: blueviolet;

}

.custom:hover {

     border-color: lightblue;

}

.custom.e-success {

     border-color: blue;

}

and so on

</style>

[Ponmani Murugaiyan]

Hi Andrey, 

Sorry for the inconvenience caused. 

We override the styles with custom name using CssClass property and it is applicable for all type of Floating label Auto, Always and Never. 

<p>Float label type Auto</p> 

<SfTextBox FloatLabelType="@FloatLabelType.Auto" CssClass="custom" Placeholder="Enter your name"></SfTextBox> 

<p>Float label type Always</p> 

<SfTextBox FloatLabelType="@FloatLabelType.Always" CssClass="custom" Placeholder="Enter your name"></SfTextBox> 

<p>Float label type Never</p> 

<SfTextBox CssClass="custom" Placeholder="Enter your name"></SfTextBox> 

 

<style> 

    /* Initial loading and hovering*/ 

    .custom.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .custom.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .custom.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .custom.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 

        border-color: blueviolet; 

    } 

 

    /*While focus in for FLoatlabeltype never*/ 

    .custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, 

    .custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { 

        background-color: blueviolet; 

    }  

 

    /*While focus in floatlabeltye Auto*/ 

    .custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .custom.e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .custom.e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after, 

    .custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .custom.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .custom.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after { 

        background: blueviolet; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox772174763  

 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Mr Andrey Voronov]

Does not work if Multiline=true

[Berly Christopher]

Hi Andrey, 

  

We have added the styles for the MultiLine component in the sample and attached it below. 

  

Modified Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox-261902391  

  

<style> 

    /* Initial loading and hovering*/ 

    .custom.e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus, .custom.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus, 

    .custom.e-float-input textarea, .custom.e-float-input.e-control-wrapper textarea, .custom.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .custom.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), 

    .custom.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), 

    .custom.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) { 

        border-color: blueviolet; 

    } 

 

    /*While focus in for FLoatlabeltype nerver*/ 

    .custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, 

    .custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, 

    .custom.e-float-input:not(.e-input-group) .e-float-line::before, 

    .custom.e-float-input:not(.e-input-group) .e-float-line::after { 

        background-color: blueviolet; 

    }  

 

    /*While focus in floatlabeltye Auto*/ 

    .custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .custom.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .custom.e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .custom.e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after, 

    .custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, 

    .custom.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after, 

    .custom.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before, 

    .custom.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after { 

        background: blueviolet; 

    } 

</style> 

  

Regards, 

Berly B.C 

[Mr Andrey Voronov]

Does not work when hover over multiline textbox.

Tried to add

.custom.e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:hover, .custom.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:hover,

but it did not work

[Sevvandhi Nagulan]

Hi Andrey, 

Thanks for the update. 

We applied the same color when hover on the Multiline textbox using below css code. Please refer the below code, 

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover { 

        border-color: blueviolet; 

    } 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox-1441789138 

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

Regards, 

Sevvandhi N