浏览器中没有垂直滚动条

我正在开发一个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

浏览器中没有垂直滚动条

回答

相关问题