我有一个带有Movable Vertical列的屏幕和一个Vaadin框架中的固定菜单栏。以下是菜单栏的SCSS查询。因此,在保持宽度100%时,最右侧菜单栏的内容将超出屏幕。
private Component buildContent(HierarchicalContainer con) {
menuContent=new CssLayout();
menuContent.addStyleName("sidebar");
menuContent.addStyleName("menuscroll");
menuContent.addStyleName("no-vertical-drag-hints");
menuContent.addStyleName("no-horizontal-drag-hints");
menuContent.setWidth(null);
menuContent.setHeight("100%");
return menuContent;
}
同时如果我将垂直柱移动到左侧。菜单栏没有占据整个屏幕宽度。
注意:垂直菜单栏有一个按钮,在其上缩小到窗口的左侧,如上图所示,并在其上展开。您无法使用鼠标移动/调整大小。它类似于Vaadin提供的Valo主题和标题。 (demo.vaadin.com/valo-theme)
任何有关上述修复的建议都会非常明显。 提前致谢!
答案 0 :(得分:0)
创建一个/city_slug
类,并在body标签中使用jquery切换此类。
答案 1 :(得分:0)
将100%宽度赋予菜单栏和垂直列的父容器。然后根据需要分割菜单栏和垂直列的宽度。请参阅此fiddle:
.container {
width: 100%;
height: 100%;
}
.header {
width: 80%;
display: inline-block;
position: fixed;
z-index: 100;
top: 0;
height: 70px;
background-color: blue;
}
.vertical-bar {
display: inline-block;
width: 20%;
background-color: #000;
height: 600px;
}
<div class="container">
<div class="vertical-bar">
</div>
<div class="header"></div>
</div>
答案 2 :(得分:0)
解决了这个问题。谢谢你们的支持。使用Vaadin布局组件解决了它。 @cfrick非常感谢。
class MyUI extends UI {
protected void init(com.vaadin.server.VaadinRequest request) {
final headerLayout = new VerticalLayout(new Label('HEADER'))
final footerLayout = new VerticalLayout(new Label('FOOTER'))
final contentLayout = new VerticalLayout()
80.times{ contentLayout.addComponent(new Button("TEST $it")) }
// XXX: place the center layout into a panel, which allows scrollbars
final contentPanel = new Panel(contentLayout)
contentPanel.setSizeFull()
// XXX: add the panel instead of the layout
final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
mainLayout.setSizeFull()
mainLayout.setExpandRatio(contentPanel, 1)
setContent(mainLayout)
}