Layout issue with Valo

Hi all,

i’m currently testing the Valo theme with Vaadin 7.3. Basically, I have a fixed size component that I want to “top center” in a browser, if the browser size is larger than the component and that browser scrollbars are showing if the window is smaller than the component (mobile etc.). Here is my test code:

public class TesUI extends UI implements SelectedTabChangeListener {
private Layout tabHome;
private Layout tabSettings;

private TabSheet tabsheet;

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = ProfisounderUI.class)
public static class Servlet extends VaadinServlet {

protected void init(VaadinRequest request) {
	VerticalLayout parentLayout = new VerticalLayout();


	tabsheet = new TabSheet();
	tabHome = new VerticalLayout();
	tabSettings = new VerticalLayout();

	tabsheet.addTab(tabHome, "");
	tabsheet.addTab(tabSettings, "panels.settings.caption");


	parentLayout.setComponentAlignment(tabsheet, Alignment.TOP_CENTER);


The centering part looks OK, but unfortunately , browser scrollbars are not shown if the browser window is shrinked. The same example works like expected if I use the “reindeer” theme. Do I miss something here?

Thank you in advance,

Browser: Firefox 32, used “vanilla” valo theme, same thing happens if I use a modified valo theme (“facebook” example)

This sounds like the same problems that I had when I moved to Valo.
Problem is; When I started to look at it, I no longer understood why it had worked before…

Your outer layout is 100% in both directions. Ie it is always the size of the parent window.
It will never become bigger than this, even if its child components require more space.
This means that the parent window, which is the component that can turn on scrollbars, will never see the need.

So, in your case, you could use:

parentLayout.setSizeFull(); parentLayout.setHeightUndefined(); You would then get a vertical scrollbar at least, but still never get a horizontal scrollbar.

The explanation above seems to match what I’ve read about vaadin layout, but as I said, I don’t understand why stuff like this worked before, which is annoying. I guess it must have something to do with css overflow settings?

Indeed the behavior has changed in Valo. It uses a new fix for the notorious scrollbar issue with inline-blocks and elements with overflow auto. Here’s the line that changes the behavior:

As Guttorm pointed out, the new behavior is in line with how layouts are specified to work, but I agree that the previous behavior was sometimes indeed nice to have.

The easiest workaround is to add the following in your theme:

.v-ui > .v-widget {
  overflow: visible;

Without investigating in more detail, a quick comment: You might have a case where earlier Vaadin versions were more tolerant of invalid layouts. Note that many of those cases were reported as invalid by the “Analyze Layouts” in the debug window, but might still have rendered in a way that looks “correct” (i.e. what the application developer happened to want in that particular situation) and thus might have been left application code.

I have a vague recollection of overflow settings changing at some point (they certainly did in 7.0, but maybe some changed also in later 7.x versions).

EDIT: Jouni already replied in more detail, so look at his answer instead.

Okay, thank you for your answers. Jouni’s workaround helped me and solved the issue for now. Howerver, it would be nice if this could be “natively” supported at some point, e.g., components could define some minimum size to fill layouts as long as there’s room and causing scrollbars to be shown in the browser (or vaadin panels…) otherwise. I think that could be useful for components like charts ot tables.
Maybe I’ll give the “Restrain” addon a shot