GWTスクロールバーが表示されない

Question

Java GWTを使用してUiBinderコントロールを作成しています。スクロールバーが表示されるのに問題があります。 UIには、左右のフローパネルを含むマスターHorizo​​ntalPanelがあります。それぞれは300x750ピクセルの3つのグラフウィジェットが割り当てられ、合計6つのグラフウィジェットです。水平スクロールバーと垂直スクロールバーが必要ですが、表示されません。 ScrollPanelを削除すると、水平スクロールバーが表示されます。私は、Horizo​​ntalPanelの代わりにFlowPanelを使ってみましたが、左右のフローパネルの子は、お互いの下に垂直に並んでいます。この作業を得るための助けをいただければ幸いです。私は以下のui.xmlとjavaコードを含んでいます。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
     xmlns:cw="urn:import:com.caseware.commons.client.ui.widgets" 
     xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
<ui:style type="com.caseware.analytics.client.ResultsWidgets.PreviewMultiGraphContainer.CssStyles"> 

    .wrapper { 
     height: 100%; 
     width: 100%; 
    } 
    .message { 
     text-align: center; 
     font-size: 2rem; 
     width: 100%; 
    } 
    .tablesContainer { 
     overflow: auto !important; 
     width: 100%; 
     height: 100%; 
     padding: 10px; 
    } 
    .tablesContainerHalf { 
     overflow: auto !important; 
     width: 100%; 
     height: 50%; 
     padding: 10px; 
    } 
    .table { 
    } 
    .table > * { 
     display: inline-block; 
    } 
    .table + .table { 
     padding-left: 10px; 
    } 
    .table2 { 
     float: left; 
    } 
    .centerItem { 
     justify-content: center; 
    } 
    .drillDownArea { 
     width: 100%; 
     height: 50%; 
    } 
    .simplePanel { 
     overflow: auto !important; 
    } 
</ui:style> 

<ui:with field="ac" type="com.caseware.analytics.client.i18n.AnalyticsConstants" /> 
<ui:with field='global' type='com.caseware.commons.client.bundles.StylesBundle' /> 

<g:HTMLPanel styleName="{style.wrapper}"> 
    <g:ScrollPanel addStyleNames="{style.simplePanel}"> 
     <g:HorizontalPanel ui:field="table" addStyleNames="{global.globalStyles.flexInline} {style.tablesContainer} {style.table}"> 
      <g:FlowPanel ui:field="leftTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel> 
      <g:FlowPanel ui:field="rightTable" addStyleNames="{style.table} {style.table2}" visible="false"></g:FlowPanel> 
     </g:HorizontalPanel> 
    </g:ScrollPanel> 
</g:HTMLPanel> 
</ui:UiBinder> 

javaファイル

package com.caseware.analytics.client.ResultsWidgets; 

import java.util.List; 

import com.google.gwt.core.client.GWT; 
import com.google.gwt.resources.client.CssResource; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.FlowPanel; 
import com.google.gwt.user.client.ui.HorizontalPanel; 
import com.google.gwt.user.client.ui.Widget; 

public class PreviewMultiGraphContainer extends Composite { 

private static PreviewMultiGraphContainerUiBinder uiBinder = GWT.create(PreviewMultiGraphContainerUiBinder.class); 

interface PreviewMultiGraphContainerUiBinder extends UiBinder<Widget, PreviewMultiGraphContainer> { 

} 

interface CssStyles extends CssResource { 
    String centerItem(); 
    String tablesContainer(); 
    String tablesContainerHalf(); 
} 

@UiField CssStyles style; 

@UiField HorizontalPanel table; 

@UiField FlowPanel leftTable; 

@UiField FlowPanel rightTable; 

public PreviewMultiGraphContainer() { 
    initWidget(uiBinder.createAndBindUi(this)); 
    HighChartsInjector.injectHighChart(); 
    table.setStyleName(style.tablesContainer()); 
} 

public void clear() { 

    leftTable.clear(); 
    leftTable.setVisible(false); 
    rightTable.clear(); 
    rightTable.setVisible(false); 
} 

public void addGraphs(final List<Widget> wc) { 
    for (final Widget w : wc) { 
     _getTableToAppendTo().add(w); 
    } 
    leftTable.setVisible(leftTable.getWidgetCount() != 0); 
    rightTable.setVisible(rightTable.getWidgetCount() != 0); 

    table.addStyleName(style.centerItem()); 
    if (rightTable.isVisible()) { 
     table.removeStyleName(style.centerItem()); 
    } 
} 

private FlowPanel _getTableToAppendTo() { 
    if (leftTable.getWidgetCount() > rightTable.getWidgetCount()) { 
     return rightTable; 
    } 
    return leftTable; 
} 
} 

Answer 1

あなたはHorizo​​ntalPanel使用することはできません - または任意のLayoutPanelを - ScrollPanelの子として、これらのパネルは、親からそのサイズを取るため。つまり、Horizo​​ntalPanelは常にScrollPanelと同じ高さになるため、スクロールバーは表示されません。

コンテンツの高さを考慮したFlowPanelまたは同様のパネルを使用する必要があります。

2つのパネルを並べて表示するには、標準のCSSアプローチを使用する必要があります。「float」プロパティを使用するか、親にflex-box CSSを使用します。フレックスボックスは現代のすべてのブラウザでサポートされています。

また、ScrollPanelの特定の機能が必要な場合を除いて、単純に削除して、.wrapperスタイルに「オーバーフロー：自動」プロパティを追加することができます。