Question

I am using Gxt-2.2.3’s combox box, when it is rendering in IE7 there is no problem with the alignment, but when it comes to Firefox-4.0.1 have got some selection arrow alignment issues as follows.

By ran the application is firebug mode , came to know that there some default style is applied to this div ‘element.style’ with value ‘padding-left:80px’.
So can any one suggest me why this incompatibility in browsers, and how do i override this style.

code:

private ComboBox<TestModel> comboModel = new ComboBox<TestModel>();

  comboModel.setFieldLabel(wrapAlignmentSpan("State"));
    ListStore<TestModel> store = new ListStore<TestModel>();
    store.add(getModels(new ArrayList<TestModel>()));
    comboModel.setDisplayField(TestModel.STATE);
    comboModel.setValueField(TestModel.STATE);
    comboModel.setLabelStyle("font-weight:bold;width:120");
    comboModel.setWidth(100);
    comboModel.setStore(store);

and finally i am adding this one to ‘FormPanel’ as follows:

     mainPanel.add(comboModel);

Thanks in advance.

Answer 1

It is because of the label width of the ‘FormLayout’. Don’t set any label width to the combo field. If it is required check the width of the label text and then set the label width as follows.

//'100' should be calculated based on the width of the label text
formLayout.setLabelWidth(100);