ShowClearButton Causes jittering in UI / cannot keep it always visible

Hello,

I am using an SfTextBox with ShowClearButton=true.

The behavior i'm getting is that when the textbox loses focus the X is being hidden. I want the X to be visible at all times, at the very least whenever there is text entered in the textbox. 

I'm using this as an input to search.filter in a table. Now my users need to first click in the textbox and then click the X in order to clear its contents. That's a shame.

Also, the textbox increases in size whenever the X is shown. It would be nice to be able to avoid that without hacking around with a container providing grow-margins.

So concretely:

How can I keep the X (ShowClearButton) visible at all times (or at least whenever the textbox is not empty)?

I tried setting some css using interop manually and had some results, but that's not maintainable. Any suggestions on how to achieve this is highly welcome.

Kind regards,

Richard

3 Replies 1 reply marked as answer

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team August 13, 2020 11:52 AM UTC

Hi Richard,

Greetings from Syncfusion support.

We have checked your query and would like to inform you that if you focus out the control, clear icon will be vanished. However you can make the clear icon visible at all times by setting CssClass as ‘e-static clear’ as like below.


 
<SfTextBox ShowClearButton="true" CssClass="e-static-clear"></SfTextBox> 


Currently, we are encountering some difficulties for making clear icon visible and considered as a defect in our end. We will include the fix for this issue in August 19th patch release. You can track the status of the issue using the below feedback link.

Feedback Link: https://www.syncfusion.com/feedback/16967

We appreciate your patience.

Regards, 
Jeyanth. 


Marked as answer

RI richardv August 13, 2020 01:56 PM UTC

Thank you. This solved my issue!


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team August 14, 2020 05:03 AM UTC

Hi Richard,

We are glad to know that your issue has been resolved. Please let us know if you have any further queries regarding this.

Regards, 
Jeyanth. 


Loader.
Up arrow icon