layout recalculation fails sporadically when nested in complex parent elements

[gdiazlo]

It is really necessary to calculate width's and height's using javascript? shouldn't this be handled by the CSS rules in place?

I see there is a lot of effort on this, but when i use it inside bootstrap containers, all the math fails, and sizes of headers and cells doesn't match, annd heigh does not get properly calculated even if i define it in the parent div container.

I would need some advice about this.

thanks a lot!

[davidjnelson]

I'll take a look at this. I definitely favor 100% CSS solutions whenever possible.

[davidjnelson]

I confirmed the bug, and updated this issues status. Thanks for finding and reporting it! Will fix.

[gdiazlo]

As a note, it happens when using fixed containers and fluid ones (as implented in bootstrap grid).

[davidjnelson]

Ok, thanks for the info.

[slydini]

I ran into this issue/bug myself and narrowed it down to being caused by the following lines from bootstrap.css:

• {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;}

which cause things like scrollbars, borders, etc. to be included in an element's width rather than separate from it. As a result, the following angular-table code no longer works as it otherwise would:

// update the header width when the scrolling container's width changes due to a scrollbar appearing
// watches get called n times until the model settles. it's typically one or two, but processing in the functions
// must be idempotent and as such shouldn't rely on it being any specific number.
scope.$watch('ResizeWidthEvent', function() {
// pull the computed width of the scrolling container out of the dom
var scrollingContainerComputedWidth = JqLiteExtension.getComputedWidthAsFloat(iElement.next()[0]);

iElement.css('width', scrollingContainerComputedWidth + 'px');

David, perhaps you might want to consider shifting the scroll bar into the last column as the author of the newer bootstrap based angular-scrollable-table appears to have done. See the links below for further details:

https://github.com/alalonde/angular-scrollable-table
http://jsfiddle.net/alalonde/BrTzg/

[slydini]

Though it may produce adverse effects elsewhere, depending on the context in which angular-table is being used in conjunction with bootstrap, a temporary workaround for at least an angular-table itself is to restore box-sizing for the table's content to its initial value as follows:

.angularTableTableContainer {-webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial;}

[slydini]

Note that this fix doesn't work in Firefox because this issue is present in Firefox even if you're not using Twitter Bootstrap!

So there would seem to be another source/culprit for this issue in the case of Firefox.