Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

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

Problem with margins in layouts using Chrome

Bruno Tavares
6 years ago May 27, 2015 9:46am
Thierry Collogne
6 years ago May 27, 2015 6:55pm

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
6 years ago May 28, 2015 6:55am
Kim Zeevaarders
6 years ago May 28, 2015 1:55pm

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
6 years ago May 28, 2015 2:02pm
Joshua Toub
6 years ago May 29, 2015 4:49am
Thierry Collogne
6 years ago May 29, 2015 6:40am
Joanna Jasdek
6 years ago Jun 03, 2015 12:25pm
Ameni Ben Rebah
6 years ago Jun 03, 2015 1:31pm
Emanuele Marra
6 years ago Jun 04, 2015 1:19pm
Tomi Nordman
6 years ago Jun 07, 2015 3:12pm

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
6 years ago Jun 09, 2015 1:52pm
Ameni Ben Rebah
6 years ago Jun 10, 2015 9:55am
wiem ben hmida
6 years ago Jun 10, 2015 10:20am
Vytautas Saikalis
6 years ago Jun 10, 2015 10:38am
Artur Signell
6 years ago Jun 11, 2015 7:12am

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
6 years ago Jun 11, 2015 8:18am
Kim Zeevaarders
6 years ago Jun 11, 2015 8:46am
T. G.
6 years ago Jun 11, 2015 9:28am
Artur Signell
6 years ago Jun 11, 2015 10:02am
Thibaut Grappin
6 years ago Jun 11, 2015 12:54pm
Joanna Jasdek
6 years ago Jul 22, 2015 8:09am
Artur Signell
6 years ago Jul 27, 2015 6:47am
T. G.
6 years ago Jul 28, 2015 10:13am