0

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();
Dawid Fieluba
  • 1,271
  • 14
  • 34
  • 1
    You could try to use a `Panel` with full size as your `HybridMenu` (full size) content. Then set the `VerticalLayout` as panel content and make it just full width but undefined height. Your `Grid` must not be full height then. This should make the `Panel` scrollable, you shoudn't need CSS. – Steffen Harbich Sep 13 '17 at 12:57
  • Well it indeed made `Panel` scrollable, but putting my `VerticalLayout` into `Panel` results with [this](https://stackoverflow.com/questions/46097254/vaadin-layout-resizing-overlaps) problem. – Dawid Fieluba Sep 13 '17 at 14:02
  • Ok, I came up with some new info - please check edit @SteffenHarbich – Dawid Fieluba Sep 13 '17 at 14:36
  • Ok, let's focus on your other issue first. – Steffen Harbich Sep 14 '17 at 07:00
  • Do you have any progress on this? – Steffen Harbich Sep 18 '17 at 12:00
  • Yep it works exactly like you said in 1st comment :) I'm putting full sized `Panel` as my `HybridMenu` content, and scrollbars are being created automagicly. – Dawid Fieluba Sep 18 '17 at 12:03

0 Answers0