Is the filteringSelect button supposed to resize when font size changes?

Dojo 1.x users
1

I’m just curious if the dijit/form/FilteringSelect button on the right side of the control is supposed to resize with changing font size, here is an image of mine with different font size, but the button stays the same size.

filteringSelect

I was trying to find some examples of the control online with big font and I found this for a similar control dijit/form/Select

https://jsfiddle.net/cz19fcpp/

which looks a bit better, the button resizes to fill the larger box.

Do I have to do something to make it resize? Or should it be automatic?

I’m setting fontsize like this

domStyle.set(that.theInput.textbox, {
   "font-size": newValue 
});

where ‘that.theInput’ is as follows

<select data-dojo-type="dijit/form/FilteringSelect" style="width:100%;"  data-dojo-attach-point="theInput" 
        data-dojo-props="labelAttr:'text', searchAttr:'text', required:false, readOnly:true" class="fe-element"  >
</select>
2

Ok this is turning out to be more difficult than I thought. I did however find the correct place to set the font-size. For a filteringSelect control changing the font-size in the class

.dijitInputField

Changes the font size of the text displayed in the text box and also resizes the drop down button to match.

Is there something listening tor changes on this class? Because setting the font-size as an inline style on various nodes doesn’t have the same effect, no matter where I set it. The only way it worked is in the Chrome debugger CSS Styles window - setting the font-size inside the class itself. So I think it has to be in side that class.

So the problem now is how to set this easily on a single filteringSelect without affecting all the others. Using class names and styles I might be able to do it but its seems like such a round about way to set a simple font-size

Do you guys know of any other ways to do this?

3

Check this out
https://github.com/dojo/themes/tree/master/flat
You can check the code to see which classes you need to modify for each widget.

4

Thanks, I managed to fix it after by setting the font-size on my entire widget like this

            domStyle.set(that.theInput.domNode, {
                "font-size": newValue 
            });

so the style overrides everything beneath it in the hierarchy of elements.