Question

我正在使用Java GWT创建一个UiBinder控件。我在滚动条出现时遇到问题。 UI具有包含左右流动面板的主水平面板。每个都分配了三个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 - 用作ScrollPanel的子项，因为这些面板从父项中获取它们的大小。这意味着您的HorizontalPanel将始终与ScrollPanel的高度相同 - 因此，不会出现滚动条。

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

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

此外，除非您需要ScrollPanel的特定功能，否则您只需删除它，然后添加＆＃34; overflow：auto＆＃34;属性为.wrapper样式。

GWT滚动条没有出现

1 个答案: