瀏覽器中沒有垂直滾動條

我正在開發一個Vaadin應用程序，並且因爲我想要獲取佈局的某些方面而極其困難。主要的問題，現在是，我似乎無法得到我的佈局垂直滾動無論內容的大小是多大或者多小的瀏覽器窗口..瀏覽器中沒有垂直滾動條

我已經就這一課題讀了，我知道hLayout和vLayout不支持滾動條，但面板可以。我嘗試了許多不同的組合來使它工作，但我只設法得到一個水平滾動條來生成，但從來沒有垂直滾動條。

另一個問題是，我建立由該公司提供的現有「模板」中的應用程序。該模板包含一個包含一些版權信息的頁腳。這個頁腳似乎沒有佔用瀏覽器窗口中關於我添加的內容的任何空間，這導致在較小的屏幕上查看水平滾動條出現在「頁腳下方」，不可訪問......我'我會提供一些現在的外觀代碼。

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上設置哪些屬性，讓它佔據內容視圖中的空間，以便水平滾動不會出現在它的下面。謝謝！

來源

2011-10-13 AndroidHustle

請參閱我的帖子以閱讀此問題的完整解決方案：http://stackoverflow.com/questions/31028870/how-can -i-make-a-verticallayout-scrollable-using-vaadin – russellhoff

我所做的來解決這個問題是如下構建的代碼。這將爲面板持有我的過濾器組件和表格創建一個垂直和水平滾動條。希望這可以幫助有類似問題的人。

@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-17 08:54:08 AndroidHustle

首先儘量讓你的面板可滾動通過調用setScrollable（true）方法，但如果你用setSizeFull（），因爲該面板新佈局設置一些自定義佈局，這將不起作用。

如果你確切地知道你的應用程序將在設備與小屏幕分辨率被打開，你簡單的可以設置你的「主」 /「主」的佈局一些固定的寬度和高度，或添加一些CSS樣式像分鐘PARAMS -width：{some value} px，min-height：{some value} px。

來源

2011-10-14 17:45:03 Yury

基於這個職位，我加入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-22 19:50:31 lynhnn

我很高興帖子可以幫助！當你遇到Vaadin的問題時，它可能有點難以找到信息... – AndroidHustle

添加到您的styles.css

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

來源

2012-11-14 20:43:30 Tomasz

工程就像一個魅力。唯一的問題是滾動條出現在文本的頂部。我不得不添加一行：'padding-right：20px;'。 – waste

所有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-05 12:57:40

我能解決這個現在（V6.8的唯一途徑。14）是以指定px值的高度而不是％

來源

2014-04-09 11:51:44 AmanicA

使用CustomLayout，總是。它更快，更高效，通過輕鬆控制html和css，您可以獲得圖形一致的結果

來源

2015-11-13 18:39:27 paola

瀏覽器中沒有垂直滾動條

回答

相關問題