Vaadin 8 View: No horizontal scrollbar on window resizing

Question

I have a Vaadin 8 application with several views.

public class ViewName extends Panel implements View {

There is a VerticalLayout as main layout in the panel.

public ViewName() {
    setSizeFull();
    VerticalLayout mainLayout = new VerticalLayout();
    setContent(mainLayout);

Then I have many different layouts (HorizontalLayout, GridLayout) or Components such as Label being added as components to the mainLayout. For the HorizontalLayouts I often do the following to use the full width of the screen:

hLayout.setWidth("100%");

I have a lot of icons, grids etc. Everything is OK as long as I don't resize the window. When I resize the window to a small size I get a mess (icons, text etc. on top of each other) and no horizontal scrollbar. (However, the grids get horizontal scrollbars.) I have tried many things to fix this. If I add

mainLayout.setSizeFull();

or

mainLayout.setWidth("100%");

I have a mess on the big screen already. I also tried the CSS for the mainLayout as described here. I get several scrollbars but none for the window itself!

The only component that resizes correctly is a Label added to the mainLayout, e.g.:

Label title = new Label("Some text",ContentMode.HTML);
    title.setWidth(100, Unit.PERCENTAGE);
    mainLayout.addComponent(title);
    mainLayout.setComponentAlignment(title, Alignment.MIDDLE_CENTER);

I also noticed that anything in a GridLayout seems to stay in place after resizing but is not vissible since I have no scrollbar. However, icons in a HorizontalLayout get on top of each other.

What is wrong? Please, I need a general instruction on which layout I should use as main layout for my view panel, how to size the components and how to get ONE horizontal scrollbar for the main window if necessary.

score 2 · Accepted Answer · answered Apr 08 '19 at 06:41

2

The problem is that you are setting the width of your mainLayout to the width of your view. This means, that your mainLayouts width will never be bigger than your views width. So no scroll bar will appear.

According to the information you posted, changing your mainLayouts width to undefined should fix the problem.

 mainLayout.setWidth("-1px");

answered Apr 08 '19 at 06:41

Julius Hörger

383
3
11

Thanks! Now I get a scroll bar at least on some of my views. Some views look good but others do not occupy the whole screen any more if I have the full window. I could not figure out why. How should I set the horizontal and grid layouts that are added to the mainLayout? I did set them to width 100%, but they do not use the whole space at least on some views. I think I am missing something else. – Natalie Apr 08 '19 at 12:12
@Natalie If you set the width to 100% while the wrappers width is undefined, the total width will always be the minimal required space. An easy solution would be to give your childs a fixed width. I would also recommend to add custom CSS, if your GUI gets more complex – Julius Hörger Apr 08 '19 at 13:07
1

Thanks! Now I understood. But that would mean that I need to give the child components a fixed size if I want to get a scroll bar. I don't really want to fix the size of the childs because I want them to take the whole space according to the size of the screen. But if I do this then it looks messed up when I resize the window to a small size and I get no scroll bar. What is the correct way of doing??? You answered my question. That should be a new question. – Natalie Apr 09 '19 at 10:20
I think I found what I was looking for: [responisve web design](https://vaadin.com/docs/v8/framework/themes/themes-responsive.html) – Natalie Apr 09 '19 at 11:21

Vaadin 8 View: No horizontal scrollbar on window resizing

1 Answers1