Problem with tabsheet and chrome???

Vaadin 6 / 7 / 8
1

Hi, Im using some tabs for my app and have a weird behavior and only happens (for now) on chrome, I checked out with safari and firefox where the tabs works ok, but in chrome is expanding the width of the container layout each time I enter a tab.

This is the error on the developer console:


Wed Mar 02 18:05:24 GMT-600 2016 com.vaadin.client.communication.MessageHandler
SEVERE: Error processing layoutscom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property ‘Bg’ of null
at Unknown.zad(net.oklex.MyAppWidgetset-0.js)
at Unknown.FHb(net.oklex.MyAppWidgetset-0.js)
at Unknown._Hb(net.oklex.MyAppWidgetset-0.js)
at Unknown.GHb(net.oklex.MyAppWidgetset-0.js)
at Unknown.ZHb(net.oklex.MyAppWidgetset-0.js)
at Unknown.ISb(net.oklex.MyAppWidgetset-0.js)
at Unknown.nSb(net.oklex.MyAppWidgetset-0.js)
at Unknown.oSb(net.oklex.MyAppWidgetset-0.js)
at Unknown.kUb(net.oklex.MyAppWidgetset-0.js)
at Unknown.Qx(net.oklex.MyAppWidgetset-0.js)
at Unknown.ly(net.oklex.MyAppWidgetset-0.js)
at Unknown.eval(net.oklex.MyAppWidgetset-0.js)
at Unknown.oi(net.oklex.MyAppWidgetset-0.js)
at Unknown.ri(net.oklex.MyAppWidgetset-0.js)
at Unknown.eval(net.oklex.MyAppWidgetset-0.js)


…

…

Wed Mar 02 17:47:51 GMT-600 2016 com.vaadin.client.LayoutManager
SEVERE: TabsheetConnector (80) has been layouted 98 times
…
Wed Mar 02 17:47:51 GMT-600 2016 com.vaadin.client.LayoutManager
SEVERE: TabsheetConnector (80) has been layouted 99 times
…
Wed Mar 02 17:47:51 GMT-600 2016 com.vaadin.client.LayoutManager
SEVERE: TabsheetConnector (80) has been layouted 100 times. This would probably be an infinite loop.

and here is my code:

vlPanelContainer.setSizeUndefined(); //vertical layour
vlPanelContainer.setWidth("100%");
vlPanelContainer.setResponsive(true);
loadHeader();   //loads the section header toolbar
vlPanelContainer.addComponent(hlHeader);
mlGeneral.addComponent(new Label("general info")); //material column layout
cssEditItem.addComponent(new Label("edit item")); //cssLayout
cssHistory.addComponent(new Label("item history")); // cssLayout
final TabSheet  tabs = new TabSheet();
TabSheet.Tab tabGeneral = tabs.addTab(mlGeneral, "General");
TabSheet.Tab tabEdit = tabs.addTab(cssEditItem, "Edit");
TabSheet.Tab tabHistory = tabs.addTab(cssHistory, "History");
tabs.setSizeUndefined();
tabs.setWidth("100%");
vlPanelContainer.addComponent(tabs);

and added some screen capture one In safari and the other in chrome.

Chrome version: Versión 48.0.2564.116 (64-bit)
Safari version: Versión 9.0.3 (11601.4.4)
Firefox version: 44.0.2
OS: OS X El Capitan 10.11.3

====== UPDATE ======

If I add a specifiq width like
tabs.setWidth(“800px”);
the problem is fixed

23407.png
23408.png

2

Hi,

This sounds like a subpixel rounding related problem. The tabsheet component for some reason might not support the subpixels it’s getting and actually rounds them to integers. This then makes the layout engine think that there’s still extra space that needs layouting. In the end it’s in a state of two different layouts, both wrong. It starts oscillating between these two states until the limit is reached.

Can you post this as a ticket to https://dev.vaadin.com/ and we’ll take a look at it when we can?

//Teemu

3

Hello, thank you for answer, I just created the ticked.

4

Hi, I looked at the ticket, but there were some details missing that prevented me from reproducing the issue. It would be easier to do something about the issue if you could fill in the missing details.

5

Hello, can you tell me what others details do you need?, Everything I did is in this post, I didnt do anything special, just created a tabsheet with 3 tabs, Im using Intellij 15.0.4, my project was created via a maven, here is my POM main info

7.6.2 ${vaadin.version} 9.2.3.v20140905 UTF-8 1.8 1.8
6

I also tried creating a tabsheet with 3 tabs without seing any issues.

The difference between what you’re seeing and my experiment might be related to e.g. how vlPanelContainer, mlGeneral, cssEditItem and cssHistory are initialized, how vlPanelContainer is attached to the UI and what theme is used.