7

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.

enter image description here

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.

Jagadeesh
  • 2,730
  • 6
  • 30
  • 45
  • please can you post the entire CSS declaration that is shown in Firebug to do with this select box? `padding-left` in this case appears to not be working as that would shift the 'innards' of the select box 30px to the right, that is is not doing in your screenie. – David Barker Jul 25 '12 at 07:44
  • **' – Jagadeesh Jul 25 '12 at 09:14
  • 1
    @David Barker - You are right the issue was due to 'FormLayout' label width. earlier it was '30px', once change to '120px' the issue got resolved. Thanks for your help in solving the issue. – Jagadeesh Aug 22 '12 at 11:52

2 Answers2

2

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));
Jagadeesh
  • 2,730
  • 6
  • 30
  • 45
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);
Jagadeesh85s
  • 83
  • 6