GWT 滚动条没有出现

Question

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

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

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

如果要并排显示两个面板，则需要使用标准 CSS 方法：使用 "float" 属性，或使用 flex-box CSS parent。 Flex-box 所有现代浏览器都支持。

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

GWT 滚动条没有出现

GWT scrollbars not appearing

java

gwt

scrollbars