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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Problem with margins in layouts using Chrome
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?
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...
Oh, we also faced with this problem. Vaadin in Chrome 43 calculates all paddings as 0 inside TabSheet.
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
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 (
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.
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.
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?
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?
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.
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..
Our applcation is seeing this issue as well. Has anyone found a reasonable workaround yet?
I have a same problem with the last update chrome 43.0.2357.124
I see it has been reported to weeks ago and nobody from Vaadin team commented on it?
Cheers
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.
Also setEnable (false) : hide completely the component.
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
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
Also created an issue for Chrome: https://code.google.com/p/chromium/issues/detail?id=499199
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
There is another workaround for this problem?
Please write if somebody has workaround.
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.
Hi,
I've just tried with Version 45.0.2454.15 dev-m (64-bit), it seems to work well !
Thanks a lot !