ページの RootLayoutPanel にアタッチされた GWT アプリケーションで TabLayoutPanel を使用しています。
各タブ内には、FlexTable を表示するために使用される ScrollPanel があります。
TabLayoutPanel を垂直方向に拡張して、ユーザーが内部の ScrollPanel を使用する代わりに、ブラウザーのスクロール バーを使用してページ全体をスクロールできるようにすることは可能ですか?
ページの RootLayoutPanel にアタッチされた GWT アプリケーションで TabLayoutPanel を使用しています。
各タブ内には、FlexTable を表示するために使用される ScrollPanel があります。
TabLayoutPanel を垂直方向に拡張して、ユーザーが内部の ScrollPanel を使用する代わりに、ブラウザーのスクロール バーを使用してページ全体をスクロールできるようにすることは可能ですか?
簡単な答えは次のとおりです。LayoutPanelでは不可能です。理由:LayoutPanelは、ブラウザのクライアント領域、つまりユーザーに表示される部分を埋める必要のあるアプリケーションに固有のものです。ブラウザの問題の1つは、表示領域の高さが正確にあり、ブラウザウィンドウのサイズが変更されると自動的にサイズが変更されるウィジェットがあることです。これは、LayoutPanelsが解決する問題の1つです。
ブラウザのスクロールバーを使用して、表示領域よりも長いページを作成できるようにする場合は、「通常の」パネルを使用します。
ところで、参考までに、FlexTableのレンダリングは遅いので、可能であればグリッドを使用する方がよいことをご存知でしょう。
TabLayoutPanel に新しいスタイルを追加するだけです。
this.addStyleName("tab-style-content");
CSS で次のように定義します。
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
したがって、プロパティoverflow
は gwt-TabLayoutPanelContent で上書きされ、スクロールバーが自動的に表示されます。
TabLayoutPanel をルート パネルよりも大きくすると、ブラウザーのスクロール バーが表示されます。
このようなことを実現したい場合は、常に 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);
}