CODEWITHSUNDEEP
javascriptjquerycss
Christian Kirchhoff
Christian Kirchhoff

Reputation: 285

Javascript: Calculation of width in Safari/iOS for elements overflowing their containers

My particular problem first occured to me when using with http://mkoryak.github.io/floatThead/

On certain pages I have tables with a of of columns. The client opted for horizontally scrolling these tables. Therefore those tables are wrapped in a div that has overflow-x: auto;

Works nice on desktop browsers and Safari/iOS.

When using floatThead at some point it requests the width of the table with outerWidth() to set the width of the table header when it is floated. On the iPad that floated table header is just as wide as the wrapper element, the rest of it is cropped. I debugged the outerWidth() values of both the container and the table.

On a desktop browser I get values like e.g. 1200px for the container, but 1900px for the much wider table inside of the container.

But in Safari iOS I get 935px for both the container and the table. The container elements doesn't have to be set to scroll larger contents to produce this error. I work with Twitter Bootstrap 2.3.2. If there is a page with a container fluid, its width is adjusted to the window width. If there is a table inside with a larger width, it is visible through overflow: visible;. But – on the iPad – when floatThead is triggered, the floated table headers width gets restricted to the width of the fluid container (minus its padding).

Therefore I presume that the reason for this is a different calculation of the width of bigger elements that are inside smaller containers.

If I understand it correctly, jQuery's outherWidth() uses css() to retreive the width of elements, and css() uses getComputedStyle or currentStyle.

I assume the browser returns the "wrong" with values, and that's all jQuery/floatThead can work with.

And I was wondering if my assumption is correct, or if there could be other factors triggering the "wrong" calculation of the width in Safari iOS.

Upvotes: 0

Views: 1804

Answers (1)

Christian Kirchhoff
Christian Kirchhoff

Reputation: 285

Apologies for not checking into it any further myself before asking the question. After making a static copy of one of the problematic pages and successively deleting html, javascript and css code I was able to track down the reason.

Twitter Bootstrap 2.3.2 sets max-width: 100&; for table elements. In the said case (table being inside a smaller container that allows for scolling its contents), the table width doesn't need to be restricted in any way.

It didn't cause any problems in desktop browsers. Even in Safari the width of the table itself was fine and scrolling worked. Just jQuery's outerWidth() received a wrong value, which resulted in the floated thead being cropped to the width of the outer container.

Upvotes: 2

Related Questions