GWTのListBoxだからブラウザ

Question

渡って異なるレンダリング、私はGWTアプリケーション

のためのリストボックスのカスタム実装を持っている。その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でそれをカスタマイズしてみた：Safariでいる間

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

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

私はそれを行うどちらの方法、それはブラウザ間で均等に表示されません、それだけでは、Google Chromeの「素敵」に見えますFirefoxには、ドロップダウンや別のスクロールバーに「uglee」の矢印が表示されます。

これはなぜ起こっているのでしょうか？ styleNameがすべて削除されますので、私はGoogleやフォーラムを試してみましたが、GWT関連のトピックを検索することはほとんど役に立たない

Answer 1

これはあなたの質問にお答えした通りです：標準のGWT ListBoxは、ブラウザによって異なっています。

主な理由は、フードの下でネイティブブラウザコントロールを使用していることです。 HTML select control要素hereを作成します。 さまざまなブラウザで基本HTMLコントロールを試すことができますhere。

だから、それについてはあまりできません。 一部のブラウザでは、スタイルを変更できますが、一貫して変更することはできません。

Answer 2

まずありき言うまでもなく、あなたは、addStyleNames代わりのstyleNameを使用する必要があります既存のスタイル名を指定し、指定したスタイル名に置き換えます。

第2に、これはGWTの問題ではありません。ブラウザはさまざまな要素を別々にレンダリングします。もっと統一された見た目が必要な場合は、CSSの提案を検索する必要があります。