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

现在，至于风格，我尝试用这一行“引导”它：

<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上看起来“不错”，而在Safari和Firefox中，下拉菜单和不同的滚动条会有一个“uglee”箭头。

关于为什么会发生这种情况的任何想法？毋庸置疑，我已经尝试过谷歌和论坛，但搜索GWT相关主题几乎没用了

Answer 1

正如您所描述的那样：标准GWT ListBox在不同浏览器中的呈现方式不同。

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

所以你无能为力。在某些浏览器上，您可以设置样式，但不能始终如一。

Answer 2

也许你可以看看gwt-bootstrap3来使用它而不是标准的gwt小部件。

GWT ListBox在浏览器之间呈现不同

2 个答案: