Gxt组合框选择箭头在Firefox和Safari中未正确对齐。

Question

我正在使用Gxt-2.2.3的下拉框(combox box)，在IE7中渲染时对齐没有问题，但当它出现在Firefox-4.0.1中时，会出现一些选择箭头对齐的问题，如下图所示。

通过在firebug模式下运行应用程序，我了解到这个div元素有一些默认样式被应用，'element.style'的值为'padding-left:80px'。因此，有人能建议我为什么浏览器不兼容，以及我如何覆盖这个样式。

代码:

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

最后，我将它添加到“FormPanel”中，如下所示：

     mainPanel.add(comboModel);

感谢您的提前帮助。

- Jagadeesh

---

请问您能否将在Firebug中显示的与此选择框相关的完整CSS声明发布出来？在这种情况下，padding-left似乎无效，因为它不会将选择框的“内部”向右移动30像素，就像您的屏幕截图中没有那样。 - David Barker

'<div id="x-form-el-x-auto-32" class="x-form-element x-form-el-x-auto-32" style="padding-left:80px" role="presentation">'，不仅适用于组合框，文本框也有。看起来是因为“表单面板”的缘故。最后，我将所有这些字段添加到“表单面板”中。 - Jagadeesh

@David Barker - 你是对的，问题是由于'FormLayout'标签宽度引起的。之前它是'30px'，一旦改为'120px'，问题就得到解决了。感谢您在解决问题方面的帮助。 - Jagadeesh

Answer 1

问题出在“FormLayout”中的“标签宽度”，其中一个“FormLayout”的“标签宽度”为“30像素”。将其增加到“120像素”后，问题得以解决。

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

最后将“组合字段”添加到“左侧”容器中，如下所示：

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

- Jagadeesh

Answer 2

这是由于'FormLayout'的标签宽度引起的。不要为组合字段设置任何标签宽度。如果需要，请检查标签文本的宽度，然后按以下方式设置标签宽度。

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

- Jagadeesh85s