ブラウザの垂直スクロールがありません

Question

私は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に設定できるプロパティが分かっていれば、水平スクロールがその下に表示されないようにすることができます。ありがとうございました！

Answer 1

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

@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); 

    } 

Answer 2

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

アプリケーションが小さな画面解像度のデバイスで開かれることを正確に知っていれば、単純な「主」/「メイン」レイアウトを固定幅と高さに設定したり、min -width：{some value} px、min-height：{some value} px。

Answer 3

この投稿に基づいて、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);> 

Answer 4

すべてVaadinコンポーネントは、デフォルトでは未定義の大きさを持っているので、通常の方法setSizeUndefined()をコールする必要はありません、あなたのstyles.css

.v-verticallayout > div { 
    overflow-y: auto ! important; 
} 

Answer 5

にこれを追加します。また、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レイアウトから削除された場合、サイズはデフォルトでは制限されず、下方向に拡大され、ウィンドウ全体のスクロールバーのみが表示されます。

Answer 6

これを修正できる唯一の方法（v6.8。14）はになります。高さをpx値で指定します。％の代わりに

Answer 7

常にCustomLayoutを使用してください。より速く、より効率的で、htmlやCSSを簡単に制御することで、一貫性のある結果を簡単に導くことができます。