TabLayoutPanel с прокруткой

Question

Я использую TabLayoutPanel в GWT-приложении, прикрепленном к RootLayoutPanel страницы.

Внутри каждой вкладки у меня есть ScrollPanel, которая используется для отображения FlexTable.

Можно ли заставить TabLayoutPanel расти вертикально, чтобы пользователь мог прокручивать всю страницу, используя полосу прокрутки браузера, вместо использования внутренней ScrollPanel?

Answer 1

Просто добавьте новый стиль в TabLayoutPanel:

this.addStyleName("tab-style-content");

И определите в своем CSS как:

.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;     
}

Таким образом, свойство overflow будет перезаписано в gwt-TabLayoutPanelContent, и полоса прокрутки будет показана автоматически.

Answer 2

Краткий ответ: это невозможно с LayoutPanel's. Причина: LayoutPanel предназначены для приложений, которым необходимо заполнить клиентскую область браузера, или, другими словами, часть, видимую пользователем. Одной из проблем браузеров является наличие виджета, который имеет в точности высоту видимой области, а также автоматически изменяет размеры при изменении размера окна браузера. Это одна из проблем, которую решают LayoutPanels.

Если вы хотите использовать полосу прокрутки браузера и иметь возможность создавать страницы длиннее видимой области, используйте "обычные" панели.

Кстати, к вашему сведению, FlexTable медленен в рендеринге и, если возможно, лучше использует Grid.

Answer 3

Если вы сделаете TabLayoutPanel больше, чем корневая панель, вы получите полосу прокрутки браузера.

Answer 4

Если я хочу добиться чего-то подобного, я всегда помещаю TabLayoutPanel в SimplePanel и добавляю SimplePanel в RootPanel. Я думаю, это не лучший способ, но он работает.

public void onModuleLoad() {
   //Create TabPanel
   TabPanel tp = new TabPanel();
   tp.add(new HTML("Foo"), "foo");
   tp.add(new HTML("Bar"), "bar");
   tp.add(new HTML("Baz"), "baz");
   tp.selectTab(1);
   // Create SimplePanel and add TabPanel
   SimplePanel sp =new SimplePanel();
   sp.add(tp);
   // Add SimplePanel to the root panel.
   RootPanel.get().add(sp);
}