Enable clear TextField option in (Chrome/Edge)

[eduardo.sasse]

Is there a way to enable the clear TextField option in Chrome and Edge?



GWT Version: 2.9.0
SmartGWT Version: 6.1-p20180404

Many thanks in advance.

[Isomorphic]

Hi Eduardo, an icon to clear text is not a built-in feature in non-IE browsers.

In SmartGWT, you could use a FormItemIcon with inline:true to get the same appearance and behavior:

https://smartclient.com/smartgwt/jav....lang.Boolean-

If you wanted this behavior to be pervasively available, you could create a subclass of TextItem that had this icon, and use that in all of your forms (consider DataSourceField.editorType, for example).

This would also be something we could build as a Feature Sponsorship, if you wish. Specifically, perhaps there could be a new property, TextItem.canClear, which would add an icon similar to the built-in behavior in Internet Explorer.

[eduardo.sasse]

Thanks for the quick answer.

I have implemented the feature in the following way, but unfortunatly, didn't get working results...

TextItem textItem = new TextItem();

PickerIcon pickerIcon = new PickerIcon(PickerIcon.CLEAR);
pickerIcon.setInline(true);
pickerIcon.addFormItemClickHandler(formItemIconClickEvent -> textItem.clearValue());

textItem.setTextBoxStyle("textItemStyle");
textItem.setIcons(pickerIcon);

.textItemStyle{ inline:true; }

Besides that, how would I apply the editorType directly in my ds.xml so that every field with type="text" has the feature?

Many thanks in advace.

[Isomorphic]

You'll need to explain what went wrong with your attempt before it's possible to help you. Note however that "inline" is not a valid CSS property.

We mentioned above how to have this appear in various fields:

If you wanted this behavior to be pervasively available, you could create a subclass of TextItem that had this icon, and use that in all of your forms (consider DataSourceField.editorType, for example).

Note that we would strongly recommend against adding this behavior pervasively. There's a reason this feature only appears in obsolete browsers: it's a waste of space for a capability that isn't used very often, and can be achieved with just a couple of keystrokes (Ctrl-A, Delete) in the unusual case that it's needed.

[eduardo.sasse]

Hello,

In my case, the "X" still does not appear. I have also adjusted my .css to:

.textItemStyle{ display: inline; }

[Isomorphic]

You shouldn't be setting display:inline either, both because it's totally unrelated to icon placement (it's to do with CSS block layout) and because in general, layout is not controlled via CSS in SmartGWT (only borders, padding et are).

The setInline(true) call is what will make the icon inline.

Outside of that, you need to do some elementary troubleshooting here: try clicking where the X should be, to see if it's present at the expected location but not visible, and check whether you see a correct attempt to fetch the actual media file. You can also look at the DOM to verify the presence of the element.