ScrollPanel (высота) странное поведение GWT, - PullRequest
Новая
       28

ScrollPanel (высота) странное поведение GWT,

1 голос
/ 07 февраля 2011

Я получаю странное поведение ScrollPanel. Высота уменьшается до 30 пикселей. Вот мой ui.xml 

    <g:ScrollPanel styleName="{style.fileViewerWorkspaceBg}">
      <g:FlowPanel>
   <g:FlowPanel>
           <g:FlowPanel>
        <my:OneClickFileUploader ui:field="uploader" enableMultipleFileUpload="true" />
     </g:FlowPanel>
     <g:FlowPanel ui:field="fileTablePanel">
       <cell:SimplePager ui:field="pager"/>
       <cell:CellTable ui:field="fileViewTable"/>
     </g:FlowPanel>  
       <g:Label ui:field="processingField" />
   </g:FlowPanel>
  <g:FlowPanel ui:field="filePreview"/>
  </g:FlowPanel>
</g:ScrollPanel>

Я переключаюсь между filePreview & fileTablePanel + uploader, когда я отображаю uploader+fileTablePanel, он показывает мне полосы прокрутки, но когда я переключаюсь на filePreview, он уменьшает высоту панели filePreview до ~ 30px. В чем может быть проблема. Когда я изменяю высоту дочернего элемента div из ScrollPanel на 100% в firebug, он прекрасно отображает страницу, но кажется, что я не могу получить доступ к дочернему элементу div ScrollPanel, какой-либо обходной путь?

Более того, если попытаться сделать ScrollPanel UiField в классе Java, оно выдает исключение, что it can have only one child, и в действительности у него есть один дочерний элемент.

спасибо. аль

Ответы [ 2 ]

1 голос
/ 07 января 2016

Я знаю, что прошло много времени с тех пор, как был задан этот вопрос, но это решение я использовал, когда столкнулся с той же проблемой: 

getContainerElement().getStyle().setHeight(100, Unit.PCT);

Это потому, что панель прокрутки - это простая панель.

public ScrollPanel() {
this.scrollableElem = getElement();
this.containerElem = Document.get().createDivElement();
scrollableElem.appendChild(containerElem);
initialize();
}

Когда виджет установлен / добавлен через код или uibinder, он будет использовать this.containerElem для хранения своих дочерних элементов

Это результирующий html.Я назвал их в надежде прояснить: 

<div id="ScrollPanel" >
    <div id="containerElem" style="position: relative; zoom: 1; height: 100%;">
        <canvas id="myAddedWidget" />
    </div>
</div>
0 голосов
/ 07 февраля 2011

Попробуйте установить styleName с height:100%; для FlowPanel (div в результирующем HTML).
Также ваш код "отсутствует конечный тег g: FlowPanel".
Возможно, опечатка в теге перед </g:ScrollPanel> должна быть </g:FlowPanel> вместо <g:FlowPanel />. 

<ui:style>
    .container {
      background: #DDD;
      height:1500px; 
      width:100%;
    }
    .fileViewerWorkspaceBg {
        height:100%;
    }
    .zero {
        background-color: yellow;
        height:300px;
    }
    .first {
        background-color: blue;
        height:50px;
    }
    .fileTablePanel {
        background-color: red;
        height:150px;
    }
</ui:style>

<g:ScrollPanel styleName="{style.fileViewerWorkspaceBg}">
    <g:FlowPanel styleName="{style.container}">
        <g:FlowPanel styleName="{style.zero}">
            <g:FlowPanel styleName="{style.first}">
                <g:Label>OneClickFileUploaderPanel</g:Label>
                <my:OneClickFileUploader ui:field="uploader" 
                  enableMultipleFileUpload="true" /> 
            </g:FlowPanel>
            <g:FlowPanel styleName="{style.fileTablePanel}">
                <g:Label>fileTablePanel</g:Label>
                <cell:SimplePager ui:field="pager" /> 
                <cell:CellTable ui:field="fileViewTable" /> 
            </g:FlowPanel>
            <g:Label>Label</g:Label>
        </g:FlowPanel>
   </g:FlowPanel>
</g:ScrollPanel>
...