selected tab not scrolling into view

Steps to Reproduce

	<tabbox width="500px">
		<tabs id="tabs"/>
		<tabpanels height="100px"/>
	</tabbox>
	<button label="Add Tab">
		<attribute name="onClick"><![CDATA[
			Tab tb = new Tab();
			tb.setLabel("Tab panel test test test test");
			tb.setClosable(true);
			tb.setSelected(true);
			tabs.appendChild(tb);
		]]></attribute>
	</button>

click button to add multiple tabs

Current Result

the selected tab does not scroll into view.

Expected Result

tab scrolls into view when selected

Debug Info

Root Cause

problem became visible after fixing ZK-4051

the left position is calculated while the new tab is still breaking to the next line
using styles to avoid the line breaking in the first place can avoid this (see workaround: float replaced by inline block, nowrap )

It even looks like recalculating the z-tabs-content width seems to become unnecessary, allowing for simpler JS code.

additional/specific style rules might be necessary for z-tabbox-bottom

Workaround

adding theme specific styles e.g. for breeze:

tested on chrome/ff/IE11 (10-8 emulated),edge

.breeze .z-tabbox-top > .z-tabs > .z-tabs-content {
	white-space: nowrap;
	width: initial!important; /*not necessary but shows a calculated width is maybe not needed at all*/
}
.breeze .z-tabbox-top > .z-tabs > .z-tabs-content > .z-tab {
	display: inline-block;
	float: none;
	vertical-align: bottom;
}