GWT-Bildlaufleisten werden nicht angezeigt

Question

Ich verwende Java GWT, um ein UiBinder-Steuerelement zu erstellen. Ich habe ein Problem damit, dass die Bildlaufleisten angezeigt werden. Die Benutzeroberfläche verfügt über ein Master-HorizontalPanel mit einem linken und rechten Ablaufpanel. Jedem sind drei Graph-Widgets von 300x750 Pixeln für insgesamt sechs zugeordnet. Es sollte horizontale und vertikale Bildlaufleisten geben, die jedoch nicht angezeigt werden. Wenn ich das ScrollPanel entferne, kann ich die horizontalen Bildlaufleisten erscheinen lassen. Ich habe versucht, ein FlowPanel anstelle eines HorizontalPanel zu verwenden, aber die linken und rechten Flow-Panel-Kinder werden vertikal untereinander angeordnet. Irgendwelche Hilfe, um dieses Arbeiten zu erhalten, würde geschätzt werden. Ich habe den ui.xml- und den Java-Code unten eingefügt.

<!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-Datei

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

Sie können nicht HorizontalPanel verwenden - oder jede LayoutPanel - als Kind von Scroll, weil diese Platten ihrer Größe von einem Elternteil nehmen. Dies bedeutet, dass Ihr HorizontalPanel immer die gleiche Höhe wie Ihr ScrollPanel hat - daher werden keine Bildlaufleisten angezeigt.

Sie müssen FlowPanel oder ein ähnliches Panel verwenden, das die Höhe seines Inhalts annimmt.

Wenn zwei Panels nebeneinander angezeigt werden sollen, müssen Sie standardmäßige CSS-Ansätze verwenden: Verwenden Sie entweder die Eigenschaft "float" oder verwenden Sie flex-box CSS für das übergeordnete Element. Flex-Box wird von allen modernen Browsern unterstützt.

Wenn Sie keine spezielle Funktionalität von ScrollPanel benötigen, können Sie sie einfach entfernen und die Eigenschaft "overflow: auto" zu Ihrem .wrapper-Stil hinzufügen.