GWT滾動條未顯示

我正在使用Java GWT創建UiBinder控件。我有一個問題讓滾動條出現。 UI具有包含左側和右側流動面板的主水平面板。每個分配了三個300x750像素的圖形窗口小部件，總共六個。應該有水平和垂直滾動條，但它們不會出現。如果我刪除ScrollPanel，我可以看到水平滾動條。我已經嘗試使用FlowPanel而不是HorizontalPanel，但是左側和右側流動面板的孩子排列在彼此之下。任何幫助得到這個工作，將不勝感激。我已經在下面包含了ui.xml和java代碼。GWT滾動條未顯示

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

來源

2017-04-13 Phil McLachlan

重複的[如何使用相對大小的ScrollPanel]（http://stackoverflow.com/questions/41110336/how-to-use-scrollpanel-with-relative-size），[GWT ScrollPanel 100％的高度] （http://stackoverflow.com/questions/16794639/gwt-scrollpanel-with-100-height），[GWT ScrollPanel沒有顯示完整的內容]（http://stackoverflow.com/questions/14282858/gwt-scrollpanel-未呈現最完整的內容）。簡短的回答，無益的答案：身高百分比是有問題的。 –

我的ScrollPanel沒有高度。在你的建議下，我添加了下面的代碼。 \t \t scrollPanel.setSize（「1500px」，「900px」）;只有水平滾動條顯示。難道我做錯了什麼。 –

[如何使用相對大小的ScrollPanel]可能的重複（http://stackoverflow.com/questions/41110336/how-to-use-scrollpanel-with-relative-size） – letz

不能使用HorizontalPanel - 或任何LayoutPanel - 作爲ScrollPanel的孩子，因爲這些面板從父母把他們的大小。這意味着您的HorizontalPanel將始終與您的ScrollPanel高度相同 - 因此，不會出現滾動條。

您需要使用FlowPanel或從其內容中獲取高度的類似面板。

如果您希望並排顯示兩個面板，則需要使用標準的CSS方法：使用「float」屬性或在父級上使用flex-box CSS。所有現代瀏覽器都支持Flex-box。另外，除非需要ScrollPanel的特定功能，否則只需將其刪除，並將「overflow：auto」屬性添加到.wrapper樣式中即可。

來源

2017-04-13 14:30:37

這讓它工作。謝謝！ –

GWT滾動條未顯示

回答

相關問題