java 浏览器中没有垂直滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7751429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No vertical scroll in browser
提问by AndroidHustle
I'm developing a Vaadin application and am having extreme difficulty getting some aspects of the layout as I want. The major problem right now is that I can't seem to get a vertical scroll in my layout no matter how big the size of the content is or how small the browser window is..
我正在开发一个 Vaadin 应用程序，并且在获得我想要的布局的某些方面时遇到了极大的困难。现在的主要问题是，无论内容有多大或浏览器窗口有多大，我似乎都无法在布局中垂直滚动。
I have read up on the subject, I know that the hLayout and the vLayout doesn't support scrollbars but the Panel do. I've tried in many different combinations to make it work but I've only managed to get a horizontal scrollbar to generate but never a vertical one.
我已经阅读了这个主题，我知道 hLayout 和 vLayout 不支持滚动条，但面板支持。我尝试了许多不同的组合来使其工作，但我只能设法生成一个水平滚动条，但从来没有生成垂直滚动条。
Another problem is that I'm building the application inside an existing "template" provided by the company. This template contains a footer containing some copyright information. This footer doesn't seem to occupy any space in the browser window with regards to the content I'm adding, which causes when viewing on smaller screens the horizontal scrollbar to appear "underneath" the footer, non-accessible... I'll provide some of the code of how it looks now.
另一个问题是我正在公司提供的现有“模板”中构建应用程序。该模板包含一个包含一些版权信息的页脚。对于我添加的内容，此页脚似乎没有占用浏览器窗口中的任何空间，这会导致在较小屏幕上查看时，水平滚动条出现在页脚“下方”，无法访问......我将提供一些关于它现在看起来如何的代码。
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);
}
}
I would love to know if anyone sees any obvious errors in my code. And if anyone knows what property I can set on the footer CSS to have it occupy space in the content view so that the horizontal scroll doesn't appear underneath it. Thank you!
我很想知道是否有人在我的代码中看到任何明显的错误。如果有人知道我可以在页脚 CSS 上设置什么属性，让它在内容视图中占据空间，那么水平滚动就不会出现在它的下方。谢谢！
回答by AndroidHustle
What I did to solve this issue was to structure the code as follows. This will create a vertical and horizontal scroll bar for the Panel holding my filter component and the table. Hopefully this can help someone with a similar problem.
我为解决这个问题所做的是将代码结构如下。这将为包含我的过滤器组件和表格的面板创建一个垂直和水平滚动条。希望这可以帮助有类似问题的人。
@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);
}
回答by Mikhail Golubtsov
All Vaadin components have size undefined by default, so usually there is no need to call method setSizeUndefined(). Also there is no need to call setScrollable(true), because it enables only programmatic scrolling possibility.
默认情况下，所有 Vaadin 组件的大小都未定义，因此通常不需要调用 method setSizeUndefined()。也不需要调用setScrollable(true)，因为它只启用编程滚动的可能性。
When I was trying to make a sense of scrolling appearance I wrote a simple skeleton of layout. Try this out as a content of the main window:
当我试图理解滚动外观时，我写了一个简单的布局框架。试试这个作为主窗口的内容：
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"));
}
}
You should see scrollbars inside the nested panels. But if setSizeFull()is removed from Skeletonlayout, then it is not limited in size (by default) and grows downwards - then only the scrollbar of the whole window appears.
您应该会在嵌套面板内看到滚动条。但是如果setSizeFull()从Skeleton布局中移除，则它不受大小限制（默认情况下）并向下增长 - 然后只出现整个窗口的滚动条。
回答by Tomasz
Add this to your styles.css
将此添加到您的 styles.css
.v-verticallayout > div {
overflow-y: auto ! important;
}
回答by Yury
First of all try to make your panel scrollable by calling setScrollable(true) method, but this will not work if you set some custom layout with setSizeFull() as this panel new layout.
首先尝试通过调用 setScrollable(true) 方法使您的面板可滚动，但是如果您使用 setSizeFull() 设置一些自定义布局作为此面板的新布局，这将不起作用。
If you exactly know that you application will be opened in device with small screen resolution, you simple can set for your "primary"/"main" layout some fixed width and height, or add some CSS style with params like min-width: {some value} px, min-height: {some value} px.
如果您确切知道您的应用程序将在小屏幕分辨率的设备中打开，您可以简单地为您的“主”/“主”布局设置一些固定的宽度和高度，或者添加一些带有 min-width 等参数的 CSS 样式：{一些值} px，最小高度：{一些值} px。
回答by lynhnn
Based on this post, I added vertical.setSizeUndefined();and started seeing vertical scrollbars.
基于这篇文章，我添加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);>
回答by AmanicA
The only way I could fix this now (v6.8.14) is to specify the height in px valuesin stead of %
我现在可以解决此问题的唯一方法 (v6.8.14) 是以px 值而不是 %指定高度
回答by paola
Use CustomLayout, always. It's faster, more efficient and by controlling html and css easily you can acieve a graphically consistent result
始终使用 CustomLayout。它更快、更高效，通过轻松控制 html 和 css，您可以获得图形一致的结果
