6

私はVaadinアプリケーションを開発していますが、レイアウトのいくつかの側面を必要に応じて取得するのが非常に困難です。現在の主な問題は、コンテンツのサイズが大きくても、ブラウザウィンドウが小さくても、レイアウトに垂直スクロールが表示されないように見えることです。

この件について読みましたが、hLayoutとvLayoutはスクロールバーをサポートしていませんが、Panelはサポートしています。私はそれを機能させるために多くの異なる組み合わせを試しましたが、水平スクロールバーを生成することしかできませんでしたが、垂直スクロールバーを生成することはできませんでした。

もう1つの問題は、会社が提供する既存の「テンプレート」内にアプリケーションを構築していることです。このテンプレートには、著作権情報を含むフッターが含まれています。このフッターは、追加するコンテンツに関してブラウザーウィンドウ内のスペースを占有していないようです。そのため、小さい画面で表示すると、水平スクロールバーがフッターの「下」に表示され、アクセスできなくなります。それが今どのように見えるかのコードのいくつかを提供します。

public class InventorySimCardTable extends M2MViewBase { //M2MViewBase extends VerticalLayout

    private final SPanel mainContent = Cf.panel("");
    private final SPanel tabPanel = Cf.panel("");
    private final SVerticalLayout tabcontent = Cf.vLayout();
    protected InventoryFilterPanel inventoryFilterPanel;

    @Override
    protected void initComponent() {
        setSizeFull();
        tabPanel.setSizeFull();
        tabPanel.getContent().setSizeUndefined();

        Table simCardTable = new Table();
        simCardTable.setWidth("1898px");
        simCardTable.setPageLength(15);

        tableContainer.setSizeUndefined();
        tableContainer.addComponent(simCardTable);

        mainContent.setWidth("99%");
        mainContent.setHeight("100%");
        mainContent.setContent(tableContainer);
        mainContent.setScrollable(true);

        centeringlayout.setSizeFull();
        centeringlayout.addComponent(mainContent);
        centeringlayout.setComponentAlignment(mainContent, Alignment.MIDDLE_CENTER);

        tabPanel.addComponent(centeringlayout);

        addComponent(tabPanel);

    }
}

誰かが私のコードに明らかなエラーを見たかどうか知りたいです。また、フッターCSSに設定できるプロパティを誰かが知っている場合は、コンテンツビューのスペースを占有して、その下に水平スクロールが表示されないようにします。ありがとうございました！

4

7 に答える 7

7

この問題を解決するために私がしたことは、次のようにコードを構造化することでした。これにより、フィルターコンポーネントとテーブルを保持するパネルの垂直および水平スクロールバーが作成されます。うまくいけば、これは同様の問題を抱えている人を助けることができます。

@Override
    protected void initComponent() {

        super.initComponent();

        if(!tableCreated) {
            createSimCardsTable();
            tableCreated = true;
        }

        mainWindow = this.getWindow();
        Panel basePanel = new Panel("");

        basePanel.addComponent(inventoryFilterPanel);
        AbstractComponent separatorLine = Cf.horizontalLine(); //Of no signficance
        separatorLine.addStyleName("m2m-horizontal-line-list-separator");
        separatorLine.setWidth("99%");
        basePanel.addComponent(separatorLine);
        basePanel.addComponent(simCardTable);
        basePanel.setSizeFull();
        basePanel.getContent().setSizeUndefined(); // <-- This is the important part

        addComponent(basePanel);
        setExpandRatio(basePanel, 1);

    }
于 2011-10-17T08:54:08.897 に答える
3

すべてのVaadinコンポーネントのサイズはデフォルトで未定義であるため、通常はメソッドを呼び出す必要はありませんsetSizeUndefined()。setScrollable(true)また、プログラムによるスクロールの可能性しか有効にしないため、を呼び出す必要はありません。

スクロールの外観を理解しようとしたときに、単純なレイアウトのスケルトンを作成しました。メインウィンドウのコンテンツとしてこれを試してみてください。

import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;

public class Skeleton extends VerticalLayout {

public Skeleton() {
    setSizeFull();

    addComponent(new Label("Header component"));

    HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
    Panel leftComponent = new Panel();
    Panel rightComponent = new Panel();
    splitPanel.setFirstComponent(leftComponent);
    splitPanel.setSecondComponent(rightComponent);
    for (int i = 0 ; i < 200 ; i ++) {
        leftComponent.addComponent(new Label("left"));
        rightComponent.addComponent(new Label("right"));
    }

    leftComponent.setSizeFull();
    rightComponent.setSizeFull();

    addComponent(splitPanel);
    setExpandRatio(splitPanel, 1);

    addComponent(new Label("Footer component"));
}
}

ネストされたパネル内にスクロールバーが表示されます。ただし、setSizeFull()がレイアウトから削除された場合Skeleton、サイズは制限されず（デフォルト）、下に大きくなります。ウィンドウ全体のスクロールバーのみが表示されます。

于 2013-05-05T12:57:40.137 に答える
2

これをあなたに追加してくださいstyles.css

.v-verticallayout > div {
    overflow-y: auto ! important;
}
于 2012-11-14T20:43:30.907 に答える
1

まず、setScrollable（true）メソッドを呼び出してパネルをスクロール可能にしようとしますが、このパネルの新しいレイアウトとしてsetSizeFull（）を使用してカスタムレイアウトを設定した場合、これは機能しません。

アプリケーションが小さな画面解像度のデバイスで開かれることが正確にわかっている場合は、「プライマリ」/「メイン」レイアウトに固定の幅と高さを設定するか、min-widthなどのパラメータを使用してCSSスタイルを追加できます。{いくつかの値}px、最小の高さ：{いくつかの値}px。

于 2011-10-14T17:45:03.450 に答える
1

この投稿に基づいて、vertical.setSizeUndefined();垂直スクロールバーを追加して表示し始めました。

setMainWindow(new Window(title ));

vertical.setSizeFull();
vertical.setHeight("100%");

toolbar = createToolbar();
vertical.addComponent(toolbar);
vertical.setExpandRatio(toolbar, 0.03f);

Component tree = buildTree();
vertical.addComponent(tree);
vertical.setExpandRatio(tree, 0.97f);
vertical.setSizeUndefined();
getMainWindow().setContent(vertical);>
于 2012-05-22T19:50:31.557 に答える
0

これを今すぐ修正できる唯一の方法（v6.8.14）は、％ではなくピクセル値で高さを指定することです。

于 2014-04-09T11:51:44.503 に答える
0

常にCustomLayoutを使用してください。それはより速く、より効率的であり、htmlとcssを簡単に制御することにより、グラフィカルに一貫した結果を得ることができます

于 2015-11-13T18:39:27.817 に答える