- OuterWdith() is used instead of width() which fixes issues with Bootst...

[afromogli]

...rap 3:s box-sizing: border-box. Described more in detail in issue: mleibman/SlickGrid#742

[afromogli]

One thing I forgot to test was to run SlickGrid without Bootstrap 3... So be sure to test that! (Or close this pull request :P )

[6pac]

I left some comments on #742. This is in my queue of things to look at, but the fix is easy, just disable border-box for the slickgrid elements. I have to do regression testing.

[afromogli]

Ok, I actually tried to disable border-box using CSS (the fix is mentioned in mleibman/SlickGrid#742 by jcready) but it did not work... So be sure to do regression testing with and without Bootstrap 3!

[skosch]

FWIW, this patch doesn't work for me with Bootstrap 3 :(

[afromogli]

@skosch Hmm... strange, it worked for me.. Have you doublechecked that you have replaced all instances of width() with outerWidth()?

[skosch]

You know what, after trying it again, it does work—once I resize one of the columns, that is, everything jumps into the right place. The autosize function does the trick, too.

(Unfortunately I now have another problem, namely that multiple grids on the same page all assume the same column widths ...)

[afromogli]

Glad to hear it works for you!
Strange regarding the same column widths for multiple grids, we are also running multiple grids on same page without having this issue.. Did this issue appear after you used this fix?

[skosch]

After ironing out a bunch of other problems, that problem has now disappeared. It seems like it was caused by jQuery selectors erroneously catching elements across mutliple grids, due to some weird interactions with another library I am using.

Note that for the header sizes to work properly, I also had to comment out the first if block in measureCellPaddingAndBorder (which was responsible for setting headerColumnWidthDiff incorrectly), in addition to replacing the width()s with outerWidth()s. Hopefully this helps the next guy ...

[6pac]

I have now patched this problem and written a blog post. Release 2.2.3 includes the fix.
https://github.com/6pac/SlickGrid/releases
http://low-bandwidth.blogspot.com.au/2015/06/slickgrid-with-jqueryui-and-bootstrap.html

[tanveer-ali]

I have to still enable the following slick.grid.css after getting the patch from @6pac in order to work in firefox the first grid loads .. it was misaligned

/box-sizing: content-box !important;/
to
box-sizing: content-box !important;

But enabling it fixed the issue. I am using jquery-ui-1.11.3 and bootstrap 3.3.4