PDA

View Full Version : Smaller font size in Combo boxes?



kerbo
6 Nov 2012, 10:46 AM
How do I specify a smaller font size in a combo box? In Ext 3.x, we were able to set:

listClass: 'x-combo-list-small'

but as was previously noted on this forum, 'x-combo-list-small' has disappeared in Ext 4.x.

I tried inserting the Ext 3.4 css in my css file but that doesn't work.

Tim Toady
7 Nov 2012, 9:55 AM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig

Haven't personally tried it before, but you could set the cls property in listConfig for your combo. Just create your own cls that set font-size.

kerbo
7 Nov 2012, 11:06 AM
Thanks, I was able to get the css to work. The expanded list displays in the smaller font size.

Now the problem is the larger font size in the combobox field value. The trick in 3.x days was to use:

ctCls: 'x-small-editor'

This doesn't work and in fact the attribute ctCls is not listed in the API docs.

I thought the 4.1 examples would have solved this problem but they didn't. Any place where a combobox has a smaller font label (like in a Toolbar), the combobox field font size is larger.

Tim Toady
7 Nov 2012, 11:12 AM
Oh, I didn't think about the input font-size when I first responded. There is a general cls property you can use on the field and use that to target it. There is also fieldStyle and fieldCls.

kerbo
7 Nov 2012, 12:03 PM
I grabbed the css:

.x-small-editor .x-form-field {
font:normal 11px arial, tahoma, helvetica, sans-serif;
}

from the Extjs3.4 ext-all.css file and stuck it in my css file. That fixed it at least for Firefox.