Gxt combo box selection arrow is not properly aligned in firefox and safari

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

The issue was because of the 'FormLayout' 'label width', there was a 'FormLayout' with the 'label width' of '30px'. So after increasing to '120px' the issue got resolved.

 LayoutContainer left = new LayoutContainer();
    MdbFormLayout layout = new MdbFormLayout(120);
    layout.setLabelAlign(LabelAlign.LEFT);
    left.setLayout(layout);
    return left;

finally added 'Combo Field' to 'left' container as follows,

left .add(stateField, new FormData(150, -1));

Answer 2

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);