web-dev-qa-db-ja.com

Vaadinレイアウトにスクロールバーを追加する方法

Vaadinレイアウトでスクロールバーを非表示にする方法を尋ねる質問をたくさん見つけましたが、私の問題はVaadinにスクロールバーが表示されないことです。たとえば、私はこのコードを持つことができます：

_HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined(); // I also tried setSizeFull()
for(Integer i = 1; i <= 15; i++) {
    layout.addComponent(new Button("Test button #" + i.toString());
}
_

しかし、このコードを実行すると、ブラウザウィンドウが小さすぎてすべてを表示できない場合、ページ上のボタンが単に切り取られます。スクロールバーは表示されません。

また、Panelを作成して、このパネルにレイアウトを追加しようとしました。 panel.addComponent(foo)とpanel.setContent(foo)の両方をテストしましたが、panel.setScrollable(true)も設定しようとしました。成功なし。

ある種のVaadinレイアウトにスクロールバーを追加する方法はありますか？ Vaadin 6.8.7を使用しています。前もって感謝します！

私の完全なコードがあります：

_private ComponentContainer openZoomifyLayout() {
    Panel panel = new Panel();
    Panel panel2 = new Panel();

    middlePanel = new MiddlePanel();

    VerticalLayout mw = new VerticalLayout();
    mw.setSizeFull();

    HorizontalLayout sp = new HorizontalLayout();
    Panel photos = new Panel();
    photos.setSizeUndefined();

    mw.addComponent(panel);
    mw.addComponent(panel2);
    mw.addComponent(sp);

    mw.setExpandRatio(sp, 99);
    mw.setExpandRatio(panel, 0);
    mw.setExpandRatio(panel2, 0);

    panel2.addComponent(middlePanel);

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER);
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER);

    photos.setContent(table);
    photos.setScrollable(true);
    sp.addComponent(photos);
    sp.addComponent(createMainDetail());

    return mw;
}
_

このメソッドはWindowを拡張するクラスで使用されるため、初期化時に存在します：setContent(openZoomifyLayout());

javalayoutwebvaadin
18
Firzen

spHorizontalLayoutとphotosPanelはフルサイズである必要があります。

Vaadin Bookの章でお読みいただけるように 6.6.1

通常、パネルの方向にサイズが定義されていない場合、デフォルトでは垂直になっているため、パネルはコンテンツのサイズに適合し、コンテンツが大きくなるにつれて大きくなります。ただし、サイズが固定またはパーセントで、コンテンツが大きくなりすぎてコンテンツ領域に収まらない場合は、特定の方向にスクロールバーが表示されます。パネルのスクロールバーは、CSSのオーバーフロー：自動プロパティを使用してブラウザーによってネイティブに処理されます。

19
nexus

パネルが必要になります。また、パネルのサイズが「自然」ではなく固定されていることを確認する必要もあります。サイズが「自然」の場合、コンテンツが完全に表示されるまでパネルが拡大されます。パネルのデフォルトサイズは自然なものであり、スクロールバーが表示されないのはこのためです。

5
blubb

次の手順を実行します：

  • 外側のレイアウトには、関連する方向に固定またはパーセントのサイズが必要です（たとえば、VerticalLayoutには固定またはパーセントの高さが必要です）
  • 内部レイアウトにはその方向に未定義のサイズが必要です
  • 外側のレイアウトにはスタイル名v-scrollableが必要です

例えば.

public class SomeView extends CustomComponent implements View
{
        this.addStyleName("v-scrollable");
        this.setHeight("100%");
        VerticalLayout content = new VerticalLayout();
        // content has undefined height by default - just don't set one
        setCompositionRoot(content);
...
}

これにより、CustomComponentがスクロールバーを表示し、contentが必要に応じて拡大します。

4
geert3