Vaadin HybridMenu shift with scrollpanel

流过昼夜 提交于 2019-12-25 11:58:08

问题


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();

来源:https://stackoverflow.com/questions/46196816/vaadin-hybridmenu-shift-with-scrollpanel

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!