PDA

View Full Version : Combobox List Align



titobundy
11 Feb 2010, 12:25 PM
Hi.

How I can changed the style text-align for the combox, without changing the other attributes of 'x-combo-list'. I try changing the setListStyle method, but I lose the other attributes as the highlight...



setListStyle("combobox-numerico");
...

css
.combobox-numerico {
text-align: right;
}

titobundy
15 Feb 2010, 5:09 AM
Any idea?

tortexy
16 Feb 2010, 11:28 AM
Either you set ID of the field,


combo.setId(id);

and you set some css styling to that.
On that way you can wind up having changed only the the combo of your choosing.

Or should "add" the style to the styles, instead of "set".


combo.addStyleName(style);

titobundy
16 Feb 2010, 11:37 AM
Either you set ID of the field,


combo.setId(id);and you set some css styling to that.
On that way you can wind up having changed only the the combo of your choosing.

Or should "add" the style to the styles, instead of "set".


combo.addStyleName(style);

I had already tried so (addStyleName), but does not work when viewing the list, only work with the setListStyle method...

tortexy
17 Feb 2010, 5:08 PM
Take the : http://www.extjs.com/examples/explorer.html#basicbinding sample.

Change the code as



SimpleComboBox<String> scb = new SimpleComboBox<String>();
scb.setId("simple-combo");
scb.getListView().setId("simple-combo-list");
for (Stock s : TestData.getStocks()) {
scb.add(s.getName());
}
scb.setFieldLabel("Name");
scb.setForceSelection(true);
scb.setTypeAhead(true);
scb.setName("company");
scb.setTriggerAction(TriggerAction.ALL);
panel.add(scb);


and put in the css file:


#simple-combo input.x-form-text {
text-align:right !important;
}
#simple-combo-list {
text-align:right !important;
}

It will have the effect as on the attached picture.

titobundy
18 Feb 2010, 6:40 AM
Thanks, works great...

Arno.Nyhm
18 Feb 2010, 8:04 AM
one advice: not use id better use a stylename
a) its reusable with other comboboxes
b) with fixed id you get sometimes unneeded errors if you open the same window twice.





SimpleComboBox<String> scb = new SimpleComboBox<String>();
scb.addStyleName("simple-combo");
scb.getListView().addStyleName("simple-combo-list");
for (Stock s : TestData.getStocks()) {
scb.add(s.getName());
}
scb.setFieldLabel("Name");
scb.setForceSelection(true);
scb.setTypeAhead(true);
scb.setName("company");
scb.setTriggerAction(TriggerAction.ALL);
panel.add(scb);
and put in the css file:



.simple-combo input.x-form-text {
text-align:right !important;
}
.simple-combo-list {
text-align:right !important;
}