Why are EXTJS tabs absolute positioned rather than simply floating them by default

[cjanssenskire]

The Question
So I was wondering if someone could explain the reasoning behind the decision to make tabs inside a tab panel absolute positioned rather than simply floating them, which would automatically position them correctly side by side.

Some Additional Thoughts
I fail to see what the benefit of doing all the calculations to position the tabs in the right place absolutely, when the browser does that automatically when the items are floating. Since the internal tab-panel re-sizes itself to the tabs already in the current implementation, their is no fear that a tab will "fall off" because it does not fit.

All i can see is a performance hit from constantly calculating and recalculating where the tabs go, in addition to causing the loss of the ability to simply hide a tab via display: none, and have the tabs instantly adjust their position. Instead you must have a javascript run that once again calculates every tabs position. This also cuts off the ability to control other elements via css, such as creating overlapping tabs (ala chrome) via pure css. Instead you would have to "extend" the class to calculate the position differently.

Summing it all up
So what are the benefits of positioning the tabs (and buttons for that matter) absolute by default and how do these benifits out weight letting the browser simply handle their positioning?

[arthurakay]

I don't work on the framework itself, but I know in 3.x there were MANY cross-browser problems caused by floating tabs (particularly to the right). I believe this is a result of allowing tab overflow, but I could be mistaken. Thus, they were positioned differently (as you can see).

I can't speak to why it is done in 4.x - I haven't taken a look at the CSS for that. I imagine it's the same sort of reasoning, making sure the framework is highly stable across all platforms and browsers.

[cjanssenskire]

Appreciate the answer, but I frankly don't by this argument as a reason, or rather to be fair the only reason. I don't doubt there were cross browser issues getting the tabs to render correctly, but they are all solvable. Proof being all the sites that use only CSS and floating them left (or right) and they show up correctly across all browsers.

The only difficulty with floating being that the wrapper must be as wide as the sum of all the tabs so that none of the tabs "fall off" onto the next line. But this issue is true for absolute positioned tabs as well, in that if the wrapper is not the same size as all the tabs. The ultimate wrapper with overflow set to hidden will not be able to scroll to the end of the tabs as the scroll area of the first wrapper will report it is smaller. This is exactly what EXT is doing, and it should work for static position floating tabs as well.

So my questions still stands on, why Sencha choose to absolute position everything which requires constant recalculation and re-rendering.

One issue that I am trying to solve and spurs this question is if I want to animate a tab closed so it shrinks in size as it closes, because they are absolute positioned, I must animate every tab that is after that tab simultaneously. If I have 10 tabs, I now have 10 animations going on instead of just one, which will undoubtedly not perform well.

So before I go mucking about in EXT CSS and remove statements like "position: absolute !importanat" I would like to know Sencha's reasoning on why.