Natural browser layout with scrollbars as needed

I know if I specify specific widths and heights for everything, and put them into a Panel, I can get scrollbars. But I don’t want a fixed-width/fixed height square with scrollbars inside the browser. I want something that will use whatever space is available in the browser and let the browser add scrollbars if the width/height exceeds the viewable area.

So I have a TestWindow that just adds a bunch of labels in a grid - enough to need horizontal and vertical scrollbars. What’s the magic recipe to get horizontal and vertical scrollbars to appear for content wider/taller than the viewable area, without having to tell Vaadin, in advance, what the width and height of this content is?


public class TestWindow extends Window
{
    public TestWindow()
    {
        super();
        
        int numRows = 50;
        int numColumns = 20;
        GridLayout content = new GridLayout(numColumns, numRows);
        content.setSizeUndefined();
        content.setSpacing(true);
        
        for (int row=0; row < numRows; row++)
        {
            for (int col=0; col < numColumns; col++)
            {
                Label l = new Label("Label for " + row + ", " + col);
                content.addComponent(l, col, row);
            }
        }
        
        setContent(content);
    }
}

Hi Mike,

I’m not sure I follow; your TestWindow below automatically added scroll bars for me. I also reduced the number of rows, and the vertical scrollbar disappeared to, but the horizontal remained - in other words, it did what I think you wanted it to do.

I guess I’m missing something…

Cheers,

Charles.

Well I have figured out why I am not getting scrollbars. Vaadin sets the CSS class for the HTML’s “body” element to v-generated-body, and that, in turn, has overflow set to “hidden”.

If I disable this “overflow: hidden”, scrollbars appear. So two questions:

  1. For Charles - how are you getting scrollbars if you, too, have overflow: hidden set on your body element?
  2. Should I just go ahead and override this CSS or am I asking for trouble?

.v-generated-body {
width: 100%;
height: 100%;
border: 0;
margin: 0;
overflow: hidden;
}
  1. No I am not - however, v-view (from Reinder theme) is over rding the overflow too, on the .v-view element.

overflow-x: auto;
overflow-y: auto;

  1. I think it depends upon what you are going to put in that layout… If it might include other layouts, I imagine that there could be a problem down the line. (NB: I’m not a CSS/Vaadin Layout guru). Typically, in Vaadin - if you want scrolling, stick it in a panel. Personally, I’d do that. You can make the panel completely hidden so that a user is completely unaware of it’s presence :
  public class TestWindow extends Window {
    public TestWindow() {
      super();

      int numRows = 10;
      int numColumns = 20;
      GridLayout content = new GridLayout(numColumns, numRows);
      content.setSizeUndefined();
      content.setSpacing(true);

      for (int row = 0; row < numRows; row++) {
        for (int col = 0; col < numColumns; col++) {
          Label l = new Label("Label for " + row + ", " + col);
          content.addComponent(l, col, row);
        }
      }

      Panel p = new Panel();
      p.setStyleName(Reindeer.PANEL_LIGHT);
      p.setContent(content);
      p.setSizeFull();
      setContent(p);
    }
  }

Cheers,

Charles.

Window extends Panel, so adding an intermediate Panel to the layout is not necessary. If the main Window is set to full size, and the content isn’t, then you’ll get scroll bars if the content is bigger than the window.

Good to know, ta!

Thanks, all. Apparently I had “messed with” the reindeer theme some time back and had removed “overflow: auto” from the v-view style, no doubt to get rid of some stray scrollbars that I just couldn’t get to go away. So that explains why I wasn’t getting any scrollbars! Thanks again.