Java GWT滚动条不显示

我正在使用JavaGWT创建UiBinder控件。我在显示滚动条时遇到问题。该UI有一个主水平面板，其中包含左流面板和右流面板。每个都是分配的三个300x750像素的图形小部件，总共六个。应该有水平和垂直滚动条，但它们不会出现。如果我删除ScrollPanel，我可以显示水平滚动条。我尝试过使用FlowPanel而不是HorizontalPanel，但是左侧和右侧的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>

.包装纸{
身高：100%；
宽度：100%；
}
.留言{
文本对齐：居中；
字号：2rem；
宽度：100%；
}
.表容器{
溢出：自动！重要；
宽度：100%；
身高：100%；
填充：10px；
}
{
溢出：自动！重要；
宽度：100%；
身高：50%；
填充：10px；
}
.桌子{
}
.表>*{
显示：内联块；
}
.桌子+.桌子{
左侧填充：10px；
}
.表2{
浮动：左；
}
.中心项目{
证明内容：中心；
}
.钻井区{
宽度：100%；
身高：50%；
}
simplePanel先生{
溢出：自动！重要；
}

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

package com.caseware.analytics.client.ResultsWidgets；
导入java.util.List；
导入com.google.gwt.core.client.gwt；
导入com.google.gwt.resources.client.CssResource；
导入com.google.gwt.uibinder.client.uibinder；
导入com.google.gwt.uibinder.client.UiField；
导入com.google.gwt.user.client.ui.Composite；
导入com.google.gwt.user.client.ui.FlowPanel；
导入com.google.gwt.user.client.ui.HorizontalPanel；
导入com.google.gwt.user.client.ui.Widget；
公共类PreviewMultiGraphContainer扩展复合{
私有静态PreviewMultiGraphContainerUiBinder=GWT.create（PreviewMultiGraphContainerUiBinder.class）；
接口预览MultigraphContainerUIBinder扩展UiBinder{
}
接口CssStyles扩展了CssResource{
字符串centerItem（）；
字符串tableContainer（）；
字符串tableContainerHalf（）；
}
@UiField CssStyles风格；
@UiField水平面板表；
@UiField流程板左表；
@UiField流程图右表；
公共预览MultigraphContainer（）{
initWidget（uiBinder.createAndBindUi（this））；
HighChartsInjector.injectHighChart（）；
table.setStyleName（style.tableContainer（））；
}
公共空间清除（）{
leftTable.clear（）；
leftTable.setVisible（false）；
rightTable.clear（）；
rightTable.setVisible（假）；
}
公共无效添加图（最终列表wc）{
用于（最终小部件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（））；
}
}
私有流程面板_getTableToAppendTo（）{
if（leftTable.getWidgetCount（）>rightTable.getWidgetCount（））{
返回右表；
}
返回左表；
}
}

不能将HorizontalPanel或任何LayoutPanel用作ScrollPanel的子级，因为这些面板的大小来自父级。这意味着水平面板的高度将始终与滚动面板的高度相同-因此，不会出现滚动条

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

如果希望两个面板并排显示，则需要使用标准的CSS方法：要么使用“float”属性，要么在父面板上使用。所有现代浏览器都支持Flex box

---

此外，除非您需要ScrollPanel中的特定功能，否则只需将其删除，然后将“overflow:auto”属性添加到

.wrapper

样式中。

重复的。简短的回答，没有帮助的回答：身高的百分比是有问题的。我的滚动面板上没有身高。根据您的建议，我添加了以下代码。滚动面板。设置大小（“1500px”、“900px”）；只有水平滚动条显示。我做错什么了吗？可能是