2017-04-13 2 views
0

Java GWT를 사용하여 UiBinder 컨트롤을 만듭니다. 스크롤바를 표시하는 데 문제가 있습니다. UI에는 왼쪽 및 오른쪽 흐름 패널이 포함 된 마스터 HorizontalPanel이 있습니다. 각각은 총 6 개에 대해 300x750 픽셀의 할당 된 3 가지 그래프 위젯입니다. 가로 및 세로 스크롤 막대가 있어야하지만 나타나지 않습니다. ScrollPanel을 제거하면 가로 스크롤 막대가 나타날 수 있습니다. HorizontalPanel 대신 FlowPanel을 사용해 보았습니다. 그러나 왼쪽 및 오른쪽 흐름 패널 하위는 서로 아래에 수직으로 정렬됩니다. 이 일을하기위한 도움을 주시면 감사하겠습니다. 나는 아래에 ui.xml과 java 코드를 포함시켰다.GWT 스크롤 막대가 나타나지 않습니다.

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

자바 파일

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

[ScrollPanel을 상대 크기로 사용하는 방법] (http://stackoverflow.com/questions/41110336/how-to-use-scrollpanel-with-relative-size), [GWT ScrollPanel with 100 % height] (http://stackoverflow.com/questions/16794639/gwt-scrollpanel-with-100-height), [GWT ScrollPanel 전체 내용을 표시하지 않음] (http://stackoverflow.com/questions/14282858/gwt-scrollpanel- 완전한 콘텐츠를 표시하지 않음). 짧은 대답, 도움이되지 않는 대답 : 높이에 대한 백분율은 문제가 있습니다. –

+0

ScrollPanel에 높이가 없습니다. 귀하의 제안에 따라 다음 코드를 추가했습니다. \t \t scrollPanel.setSize ("1500px", "900px"); 수평 스크롤바 만 보였습니다. 나는 잘못된 것을하고있다. –

+2

[ScrollPanel을 상대 크기로 사용하는 방법] (http://stackoverflow.com/questions/41110336/how-to-use-scrollpanel-with-relative-size)의 가능한 복제본 – letz

답변

1

당신은 HorizontalPanel 사용할 수 없습니다 -이 패널은 부모로부터 자신의 크기를 가지고 있기 때문에, ScrollPanel의 자식으로 - 또는 LayoutPanel을. 즉, HorizontalPanel은 항상 ScrollPanel과 동일한 높이이므로 스크롤 막대가 나타나지 않습니다.

콘텐츠에서 높이를 사용하는 FlowPanel 또는 유사한 패널을 사용해야합니다.

두 패널을 나란히 표시하려면 "float"속성을 사용하거나 상위 패널에 flex-box CSS을 사용하는 표준 CSS 방식을 사용해야합니다. 플렉스 박스는 모든 최신 브라우저에서 지원됩니다.

또한 ScrollPanel에서 특정 기능이 필요하지 않으면 간단히 제거하고 .wrapper 스타일에 "overflow : auto"속성을 추가 할 수 있습니다.

+0

그게 효과가 있습니다. 감사! –

관련 문제