GWT 滚动条没有出现

Question

我正在使用 Java GWT 创建 UiBinder 控件。我在显示滚动条时遇到问题。 UI 有一个包含左右流面板的主 Horizo​​ntalPanel。每个都分配了三个 300x750 像素的图形小部件，总共六个。应该有水平和垂直滚动条，但它们不会出现。如果我删除 ScrollPanel，我可以让水平滚动条出现。我尝试使用 FlowPanel 而不是 Horizo​​ntalPanel，但左右流面板子项垂直排列在彼此下方。任何帮助来完成这项工作将不胜感激。我在下面包含了 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 或从其内容中获取高度的类似面板。

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

此外，除非您需要 ScrollPanel 的特定功能，否则您可以简单地将其删除，并将“overflow: auto”属性添加到您的 .wrapper 样式中。