我正在使用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;
}
}
重复的[如何使用相对大小的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