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;
}
}
[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- 완전한 콘텐츠를 표시하지 않음). 짧은 대답, 도움이되지 않는 대답 : 높이에 대한 백분율은 문제가 있습니다. –
ScrollPanel에 높이가 없습니다. 귀하의 제안에 따라 다음 코드를 추가했습니다. \t \t scrollPanel.setSize ("1500px", "900px"); 수평 스크롤바 만 보였습니다. 나는 잘못된 것을하고있다. –
[ScrollPanel을 상대 크기로 사용하는 방법] (http://stackoverflow.com/questions/41110336/how-to-use-scrollpanel-with-relative-size)의 가능한 복제본 – letz