Dynamic vertical column with fixed header layout CSS issue

Question

I've got a screen with Movable Vertical column and a fixed menu bar in Vaadin framework. The below is SCSS query for Menu Bar. So, on keeping the width 100% the content of menu bar at extreme right side is going out of screen.

Below is code for vertical menu component

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;
}

And At same time if I move my vertical column to left side. The menu bar is not taking up the whole screen width.

Note: The vertical menu column has a button, on which it shrink to left side of window like above image and expand on same. You cannot move/resize it using your mouse. And its similar to Valo Theme provided by Vaadin with a Header. (demo.vaadin.com/valo-theme)

Any suggestion to fix above, will be much appreciable. Thanks in advance!

share your code so that we can have a better understanding where you went wrong. — Wisely D Cruizer, Apr 05 '17 at 12:07
I'm using vaadin so there is no HTML code for same. And for CSS I mentioned it in my image. — Shaini Sinha, Apr 05 '17 at 12:16
there is no way you can get efficient help from your question. there is nothing about the structure and how the whole layout is set via CSS. How does your left column stand here ? float, position, display , ...is it a sibbling to header, a direct child of body, .... a screenshot is useless — G-Cyrillus, Apr 05 '17 at 12:21
We need to see the code that puts together all the components. It may be because the menu bar or its parent layout has a fixed width, or something else — Morfic, Apr 05 '17 at 15:10

score 0 · Answer 1 · answered Apr 05 '17 at 12:08

0

Make a class of overflow-x:hidden and toggling this class with jquery in body tag.

answered Apr 05 '17 at 12:08

LKG

4,152
1
11
21

score 0 · Answer 2 · answered Apr 05 '17 at 12:21

Give 100% width to the parent container of menu bar and vertical column. Then split width of menu bar and vertical column as you want. Please refer this 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>

score 0 · Answer 3 · edited May 23 '17 at 10:31

Resolved this problem. Thank you guys for your support. Resolved it using the Vaadin layout components. @cfrick Thanks a lot man.

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)
}

Clone of this problem

Dynamic vertical column with fixed header layout CSS issue

3 Answers3