Problem with margins in layouts using Chrome

Bruno Tavares

Hi,
I'm using Vaadin 6, and adjusting margins using this css,

.v-horizontallayout-buttons .v-horizontallayout-margin {
    padding-left:   0px;
    padding-right: 0px;
    padding-top:    5px;
    padding-bottom: 5px;
}

but since last upgrade from Chrome (v43) it seems that this doesn't work any more!

Does any one knows why?

Thierry Collogne

Not really a solution, but we are also encountering problems with vaadin 6 in chrome v43.
Parts of our page stopped displaying. Just a big empty space where the content should be.

When using the chrome developer tools, I can see that the content is there, just not visible (maybe something is going wrong with height calcultion or?).

Haven't found the cause of it yet...

Yuriy Artamonov

Oh, we also faced with this problem. Vaadin in Chrome 43 calculates all paddings as 0 inside TabSheet.

Kim Zeevaarders

Hello,

Can confirm this issue with Vaadin 6.8.16 and google Chrome >43.

We are experiencing random layout problems in our application:
* margins come and go at random
* fields in gridlayouts are randomly layout (vertical/horizontal alignment is incorrect)

I donwgraded to 6.8.13 but problem still remained.

Got Feedback from customer today that they do not have the problem in Chrome 29.

Hope a patch comes out for this problem...

Regards,

Kim Zeevaarders

Yuriy Artamonov

We fixed problems with margin and paddings, but it requires ComputedStyle class from Vaadin 7.
Patch for CellBasedLayout (we have a full copy of that class) included.
But we can't fix strange inconsistency of layouts (

Chrome_Spacing_Margin_Fix.patch.txt (10.5 kB)

Joshua Toub

Thierry Collogne: Not really a solution, but we are also encountering problems with vaadin 6 in chrome v43.
Parts of our page stopped displaying. Just a big empty space where the content should be.

When using the chrome developer tools, I can see that the content is there, just not visible (maybe something is going wrong with height calcultion or?).

Haven't found the cause of it yet...

We've seen this exact behavior as well. I have no idea what is causing it, but have found that it is intermittent (it happens rarely for some users, and frequently for others), and seems to happen on some screens but not others.

We've found that resizing the browser (just dragging an edge a couple pixels seems to be sufficient) causes the missing content to immediatley spring into view.

Thierry Collogne

We found a fix for our page. In our page we defined a grid layout as a field variable. This layout was constantly reused in the specific page. So, everytime a user saved a record on the page, we would remove all components from that layout and than readd the new components.

Now instead of reusing the same grid layout, we create a new one everytime. This seems to solve our issue.

Joanna Jasdek

Thank you for your suggestion, but creating a new layout everytime doesn't solve this problem, especially if you have many views in application. Creating a new layout requires changing source code in many places.

There is another workaround for this problem?

Ameni Ben Rebah

I have a same problem. i use vaadin 6.8.15
after the last update of chrome (43.0.2357.81 m), I have some problem with the size of textField (I fixed the size textField ). But With only chrome, it changes.
setEnable (false) hide completely the component.
can you help me?

Emanuele Marra

Same problem here.
I'm using Vaadin 6.8.6 and with Chrome sometimes when displaying a tabsheet I get a blank page. Resizing the window solves the problem.

All of our users running Chrome are experiencing this problem. Please help.

Tomi Nordman

Same kind of problems here. Tested in Vaadin 6.8.13 and 6.8.16 with Chrome 43.0.2357.81 m.

In our case margins and paddings jumps randomly. E.g. some layout consist of multiple vertical layouts. All of them has setMargin(true). When layout is loaded, some of the vertical layouts have margins and others haven't.
If I refresh the browser, margins might change randomly on different vertical layouts. Some layouts might not change, until I refrech again (seems no logic here).

Here I have example of vertical layout structure when margin is shown like it should be:

<div class="v-verticallayout v-verticallayout-content content" style="overflow: hidden; width: 1448px; height: 231px;">
    <div style="overflow: hidden; margin: 15px 18px; width: 1450px; height: 201px;">
        <div style="height: 20px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="height: 181px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="height: 0px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"/>
    </div>
</div>

After refreshing the browser (needed to do it couple of times to make this happen), the margin is gone. Here is a snippet of the same layout structure as before.

<div class="v-verticallayout v-verticallayout-content content" style="overflow: hidden; width: 1448px; height: 201px;">
    <div style="overflow: hidden; margin: 0px; width: 1450px; height: 201px;">
        <div style="height: 20px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="height: 181px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="height: 0px; width: 1450px; overflow: hidden; padding-left: 0px; padding-top: 0px;">...</div>
        <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"/>
    </div>
</div>

Based on this, it seems that Vaadin miscalculates the inline margin style for the layout.

<div style="overflow: hidden; margin: 15px 18px; ...
VS.
<div style="overflow: hidden; margin: 0px; ...

Same is happening for layout with setSpacing(true).
Hopefully someone finds the reason and fix for this quickly (just hoping a new chrome update to resolve this). If someone has a reasonable workaround, I'd love to hear..

John Zuehlke

Our applcation is seeing this issue as well. Has anyone found a reasonable workaround yet?

Ameni Ben Rebah

I have a same problem with the last update chrome 43.0.2357.124

wiem ben hmida

always the same problem after the update chrome

Vytautas Saikalis

I see it has been reported to weeks ago and nobody from Vaadin team commented on it?

Cheers

Artur Signell

Hi,

Sadly it seems like Chrome 43 is completely broken. I created https://dev.vaadin.com/ticket/18231 to track this issue. Let's see what we can do to work around it.

Ameni Ben Rebah

Also setEnable (false) : hide completely the component.

Kim Zeevaarders

Artur Signell: Hi,

Sadly it seems like Chrome 43 is completely broken. I created https://dev.vaadin.com/ticket/18231 to track this issue. Let's see what we can do to work around it.

Thx Arthur, hopefully it will correct itself in future chrome versions

T. G.

Yuriy Artamonov: We fixed problems with margin and paddings, but it requires ComputedStyle class from Vaadin 7.
Patch for CellBasedLayout (we have a full copy of that class) included.
But we can't fix strange inconsistency of layouts (

Hello,
The ComputedStyle class requires others classes that are in Vaadin 7 but seem not to be present in Vaadin 6.8.x.
Is it possible to give a valid patch that includes all the missing classes with the right imports please ?

Thanks

Artur Signell

Also created an issue for Chrome: https://code.google.com/p/chromium/issues/detail?id=499199

Thibaut Grappin

Hi,

FYI, I have tested with Chrome version 44 (44.0.2403.39 beta-m (64-bit)), and the issue is still here.
EDIT : The Google ticket has been commented too

Joanna Jasdek

There is another workaround for this problem?
Please write if somebody has workaround.

Artur Signell

The Chrome issue has been marked as fixed and fix planned to be included in Chrome 45. Anybody on the Chrome beta channel, please test to see that the problem is resolved there.

T. G.

Hi,

I've just tried with Version 45.0.2454.15 dev-m (64-bit), it seems to work well !
Thanks a lot !

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Problem with margins in layouts using Chrome

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.