GWT ListBox 在不同浏览器中呈现不同

Question

所以，我有一个用于 GWT 应用程序的 ListBox 的自定义实现

其 xml 代码如下所示：

<g:FlowPanel addStyleNames="{style.yearRangePanel}">
        <g:FlowPanel addStyleNames="{style.rangeSeparator} {style.paddingTop}">
            <g:Label addStyleNames="{style.horizontalAlign}" ui:field="integerRangeDropdownLabel">Filter studies by range of enroled patients: </g:Label>
            <g:Label addStyleNames="{style.prefixSpace} {style.horizontalAlign}" ui:field="startSampleSizeLabel"/>
        </g:FlowPanel>
        <g:FlowPanel ui:field="integerRangeDropdownFilterPanel" addStyleNames="{style.yearRangeSliderPanel} {style.paddingTop}">
            <g:ListBox ui:field ="integerRangeDropdownListBox" styleName="{style.customListBox}"/>
        </g:FlowPanel>
    </g:FlowPanel>

它的主要 java 代码如下所示：

 @UiConstructor
    public IntegerRangeDropdownFilterComposite (String fieldName, String labelText){
        this.initWidget(uiBinder.createAndBindUi(this));

        filterChangedEvent = new FilterChangedEvent(fieldName);

        FilterConfig filterConfig = clientFactory.getApplicationContext().getConfig(FilterConfig.class);
        List<FilterSetting> filterSettings = filterConfig.getFilterConfigBy(fieldName);
        FilterSetting filterSetting = filterSettings.get(0);
        filterByIntegerRangeSettings = (FilterConfig.FilterByIntegerRangeSettings) filterSetting;

        this.increment = Integer.toString(filterByIntegerRangeSettings.getIncrement());
        this.minSampleSize = Integer.toString(filterByIntegerRangeSettings.getInitialValue());
        this.maxSampleSize = Integer.toString(filterByIntegerRangeSettings.getEnd());

        this.setupConfig(fieldName);
    }

    private void setupConfig(String fieldName){
        setupRange(fieldName);
    }

    @Override
    protected void onLoad() {
        super.onLoad();
        integerRangeDropdownFilterPanel.add((Widget) integerRangeDropdownListBox);
    }

    public void resetIntegerRangeDropdownFilter() {
        filterChangedEvent.resetField();
    }

    @UiHandler("integerRangeDropdownListBox")
    public void clickEnroled(ChangeEvent changeEvent){
        if(integerRangeDropdownListBox.getSelectedIndex()!=0) {
            String selectedItem = integerRangeDropdownListBox.getSelectedItemText();
            minSampleSize = selectedItem.substring(0, (selectedItem.indexOf('-'))).trim();
            maxSampleSize = selectedItem.substring((selectedItem.indexOf('-') + 1)).trim();
        }
        else{
            minSampleSize="0";
            maxSampleSize="100000";
        }
        resetIntegerRangeDropdownFilter();
        filterChangedEvent.addFilter(Integer.parseInt(minSampleSize), Integer.parseInt(maxSampleSize));
        clientFactory.getEventBus().fireEvent(filterChangedEvent);
    }

现在，至于样式，我已经尝试 "bootstrapping" 这条线：

<g:ListBox ui:field ="integerRangeDropdownListBox" styleName="btn btn-primary dropdown-toggle"/>

我试过用 CSS 像这样自定义它：

.customListBox{
            background-color: dodgerblue !important;
            color: white;
            padding: 5px;
        }

   <g:ListBox ui:field ="integerRangeDropdownListBox" styleName="{style.customListBox}"/>

无论我采用哪种方式，它都不会在浏览器之间呈现相同的效果，它只会在 Google Chrome 上看起来 "nice"，而在 Safari 和 Firefox 中它会有一个 "uglee" 下拉箭头和不同的滚动条。

关于为什么会发生这种情况有什么想法吗？不用说我试过 google 和论坛，但是搜索 GWT 相关主题几乎没用

Answer 1

首先，您应该使用 addStyleNames 而不是 styleName，因为 styleName 会删除所有现有样式名称并用您提供的样式名称替换它们。

其次，这不是 GWT 问题。浏览器以不同方式呈现各种元素。如果您想要更统一的外观，您需要搜索 CSS 建议。

Answer 2

正如您描述的问题一样：标准 GWT ListBox 在不同浏览器中呈现不同。

主要原因是它在后台使用了本机浏览器控件。它创建了一个 HTML select control element here。您可以在不同的浏览器中尝试基本 HTML 控制自己 here.

所以你对此无能为力。在某些浏览器上，您也许可以设置样式，但不一致。

GWT ListBox 在不同浏览器中呈现不同

GWT ListBox rendering different across browsers

css

firefox

gwt

listbox

twitter-bootstrap