Vaadin HybridMenu shift with scrollpanel

320 Views Asked by At

I want to add scrollbar to my web app so I can see every components on my browser. Red rectangle in picture below is Grid. Grid is placed inside class that extends VerticalLayout and implements View.

Green color shows my scrollbar which is added to HybridMenu instance.

    HybridMenu root = HybridMenuBuilder.get()
            .setContent(new VerticalLayout())
            .setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
            .setConfig(menuConfig)
            .build();

    root.addStyleName("scrollpanel");
    root.setSizeFull();
    super.setContent(root); //class extends UI

scrollpanel definition in css:

.scrollpanel > div {
        overflow: auto !important;
    }

When I reduce height of browser window, menu bar is also being scrolled:

I tried to set scrollbar to VerticalLayout, but it seems like id didn't capture that grid was partly hidden. (I've setted everything in VerticalLayout to full size - How to add scrollbar to Vaadin layout)

//extends VerticalLayout implements View
private void init()
{
    this.addStyleName("scrollpanel");
    this.setSizeFull();
    this.setMargin(false);

    grid.setSizeFull();
    this.addComponentsAndExpand(grid);
    this.setExpandRatio(grid, 0.7f);
    this.setComponentAlignment(grid, Alignment.TOP_LEFT);
}

Generally I found some not expected (at least for me) behaviour of components in VerticalLayout. They acts differently according to Layout root (Example with VerticalLayout as root).

Questions:

  • How can I avoid hiding part of hybrid menu when scrolling?
  • Am I missing something about adding scroll panel to this VerticalLayout?

@Edit:

I found that this problem doesn't occurs if HybridMenu content is not fullSized or content is not set. On the other hand scrollbars are not available without it.

So, creating HybridMenu the way that code below shows, solves problem with scrollpanels, but restores previous problem (layout type doesn't change anything).

    AbsoluteLayout test = new AbsoluteLayout();
    test.setSizeFull();
    HybridMenu root = HybridMenuBuilder.get()
                .setContent(test)
                .setMenuComponent(EMenuComponents.LEFT_WITH_TOP)
                .setConfig(menuConfig)
                .build();
0

There are 0 best solutions below