7alpha3 -> 7beta3 Layout breakage

Vaadin 6 / 7 / 8
1

In upgrading from 7alpha3 to 7beta3, my layouts got screwed up. In some layouts, there is a dramatic vertical shift of one or more components downward.

What’s happening is that there is a HorizontalLayout or VerticalLayout, and one of the components in the layout is visibly shifted to be entirely below the [font=Courier New]

[/font] that contains it, instead of inside of that [font=Courier New]
[/font].

In Firebug, you can see that the nested [font=Courier New]

[/font]s look correct, but visibly the outer [font=Courier New]
[/font] is just empty space, and the inner [font=Courier New]
[/font] is sitting below it.

In a
HorizontalLayout
, this results in the component being offset vertically downward. In a
VerticalLayout
, it results in extra space inserted before the component.
It appears to only happen to nested components that are themselves
HorizontalLayout
s
.

The problem seems to go away when I edit the following blurb from Reindeer’s
styles.css
 in Firebug and kill the
display: inline-block
:

.v-align-middle:before, .v-align-bottom:before, .v-expand > .v-align-middle:before, .v-expand > .v-align-bottom:before {
    content: "";
    [b]
[color=#f01212]
display: inline-block;
[/color]
[/b]
    height: 100%;
    vertical-align: middle;
    width: 0;
}

Any ideas?? I am definitely not a CSS expert.

2

I couldn’t immediately create an test case out of your description which would have produced the results you are seeing. Could you reduce the code to a test case with the same layout structure you have and post it?

3

Done. Please see
issue #9954
.