2017-04-13 115 views
0

我正在使用Java GWT创建UiBinder控件。我有一个问题让滚动条出现。 UI具有包含左侧和右侧流动面板的主水平面板。每个分配了三个300x750像素的图形窗口小部件,总共六个。应该有水平和垂直滚动条,但它们不会出现。如果我删除ScrollPanel,我可以看到水平滚动条。我已经尝试使用FlowPanel而不是Horizo​​ntalPanel,但是左侧和右侧流动面板的孩子排列在彼此之下。任何帮助得到这个工作,将不胜感激。我已经在下面包含了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; 
} 
} 
+0

重复的[如何使用相对大小的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-未呈现最完整的内容)。简短的回答,无益的答案:身高百分比是有问题的。 –

+0

我的ScrollPanel没有高度。在你的建议下,我添加了下面的代码。 \t \t scrollPanel.setSize(“1500px”,“900px”);只有水平滚动条显示。难道我做错了什么。 –

+2

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

回答

1

不能使用Horizo​​ntalPanel - 或任何LayoutPanel - 作为ScrollPanel的孩子,因为这些面板从父母把他们的大小。这意味着您的Horizo​​ntalPanel将始终与您的ScrollPanel高度相同 - 因此,不会出现滚动条。

您需要使用FlowPanel或从其内容中获取高度的类似面板。

如果您希望并排显示两个面板,则需要使用标准的CSS方法:使用“float”属性或在父级上使用flex-box CSS。所有现代浏览器都支持Flex-box。另外,除非需要ScrollPanel的特定功能,否则只需将其删除,并将“overflow:auto”属性添加到.wrapper样式中即可。

+0

这让它工作。谢谢! –