I have been trying to conditionally remove the menu arrow at the end of a Select box in my current project which uses gwt-bootstrap3.
I have tried the following options:
<select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showMenuArrow="false">
<select:Option ui:field="option1" text="option1Text"/>
</select:Select>
I have also tried via the api, using
fieldName.setShowMenuArrow(false);
I am mainly looking to disable this menu arrow when I would like to indicate that this selector is disabled and that options are not available for select dropdown.
On inspecting element via the browser:I noticed that within the div for the select box there are other divs/spans and one nested as a child of the main selector div specifically with the
<span class="caret"></span>
On removing this class name I could make the menuArrow disappear. However accessing the specific span tag with this caret class using a querySelector and then making sure this is the right one (from the entire page which has other such selectors too) seems a slight challenge and unwieldy. Here's a snippet from the inspectElement on chrome. inspecting the Select element and the span with caret
This seems like a bug in the menuArrow handling for the Selector and if it is indeed one, can anyone suggest a workaround until fixed?. Appreciate your suggestions/answers. Thanks!
The setShowMenuArrow
method is for something else: it turns on/off this arrow:
If you want to hide caret on all disabled Select boxes you could try with css:
.bootstrap-select.disabled .caret {
display: none;
}
If you want to hide it only some of them, first add new class name, for example no-caret-on-disabled
and use this:
.bootstrap-select.disabled.no-caret-on-disabled .caret {
display: none;
}