Vaadin vs Horizontal scrollbars


Why vaadin doesn’t support fluidic layouts which expand as the screen size increases and if we resize the browser screen automatically a horizontal scroll bar should appear ?

For example this Vaadin forum,
If you resize the browser, after a certain screen size the content is clipped off. Its a very bad design.
Usually most of the discussion forums like stackoverflow, google sites, they always have horizontal scroll bar if you resize the browser window OR the content would be arranged to fit in the screen. Nowhere the contents would be clipped off.

I have been fighting in Vaadin 6.8.9 to get a horizontal scroll bar with fluidic layout. I am using core layouts.
My layout structure is:
Top Panel → VerticalLayout → Panel → Horizontal layout
→ Panel → GridLayout
→ Panel → VerticalLayout

For top panel I set like


And all my layouts inside this panel depends on its width.
All layouts set to 100% width. So I expect the top panel would fill the whole screen. and the layouts also expand according to screen size. But everything is shrinked to its content.

They greatest bad thing is this rule.
You can’t have a component with relative size within a layout with undefined size.

Layouts can be very frustrating, yes, especially when you have multiple nested panels. Horizontal scrollbar is definitely achievable, though, once you get rid of conflicting instructions. The problem with relative size components within undefined size layouts is that if there is no component of defined size in there as well you’ll have nothing to calculate the widths from – the contents only take as much room as is given, and the layout only gives as much room as is demanded, which is a problem when no component demands anything… there needs to be at least one component that can be used as a calculation point. Sometimes it’s better to use actual .css styles than try to make do with the serverside size setting alone. And of course if you are able to migrate to Vaadin 7 you’ll get the nice .scss styles and lots of other nice features along :slight_smile:

Thanks for your reply

But if you resize this website - vaadin forum (I think its using vaadin)

Upto to a certain screen size, the content adjusts. After that the content is clipped off and there is no horizontal scroll bar !!!.

Yes, that sounds like a bug to me, but a bug in the forum, not Vaadin itself. You could create a ticket about it in or I meant to do it for you, but I had a much busier afternoon than I expected and now I’m completely out of time.

Hello Binoy,

I suggest you to use the ?debug parameter for finding wrong sizes. Over the hierachy tree you can see the sizes of each component until you will find a component with the wrong width to fix it.
vaadin 7 does handle sizes a lot better than vaadin 6 because the Internet Explorer 7 is not supported anymore. That’s great, because vaadin can let the browser do the layouting.

About the rule “You can’t have a component with relative size within a layout with undefined size.”:
If you want a quite complex layout with some special rules, just use CustomLayout. You can build your very clean HTML layout, style it with your CSS and set the components you need into your CustomLayout