GWT ListBox的跨浏览器

呈现不同的，所以，我有ListBox中的一个GWT应用自定义实现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}"/>

我做到这一点无论怎样，它不会同样跨浏览器的渲染，它只是看起来谷歌浏览器“好”，而在Safari和Firefox它将有一个“uglee”箭头的下拉列表和不同的滚动条。

任何想法，为什么这可能会发生？不用说，我已经试过谷歌和论坛，但搜索GWT相关主题是几乎无用

来源

2017-05-08 Steven

这与您描述的问题完全相同：标准GWT ListBox在不同的浏览器中呈现不同。

最主要的原因是它在引擎盖下使用了原生浏览器控件。它创建了一个HTML select control元素here。你可以在不同的浏览器here中尝试自己的基本HTML控制。

所以你可以做的事情不多。在某些浏览器上，您可能可以对其进行设置，但不一致。

来源

2017-05-12 07:09:05

这实际上是有道理的，谢谢你指出引擎盖下的问题 – Steven

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

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

来源

2017-05-08 13:41:36

styleName和addStyleNames用于应用程序的不同上下文中，前者用于核心框架中，后者用于该框架的特定实现 – Steven

它确实使我成为GWT问题，提供了引导CSS类是独立于浏览器的，并且在其他语言中的行为如此，GWT – Steven

不是这样，这是因为引导列表框不使用html元素。引导列表框只是看起来和行为像一个选择。但实际上并没有选择。只需查看https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select即可查看标准html选择（GWT使用的选项）在所有浏览器上呈现的不同。 – Knarf

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

来源

2017-05-12 07:46:53 Knarf

我不明白为什么在你的答案downvote，这是一个明智的建议，但是，我尝试了gwt-bootstrap3，但它变得太复杂将其整合到底层框架中 – Steven

GWT ListBox的跨浏览器

回答

相关问题