Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conflict with bootstrap 3 #742

Closed
Magicloud opened this issue Sep 10, 2013 · 31 comments

Comments

@Magicloud
Copy link

commented Sep 10, 2013

With bootstrap.css, something on cell/header size calculating is wrong. So the cells of the same column of different rows are not aligned with the header.

Everything is back to normal after remove bootstrap. But our layout is totally based on bootstrap. So please help.

screenshot from 2013-09-10 17 14 29

@Magicloud

This comment has been minimized.

Copy link
Author

commented Sep 10, 2013

    var columns = [
        {id: 'name', name: 'Name', field: 'name'},
        {id: 'formula', name: 'Formula', field: 'formula'},
        {id: 'format', name: 'Format', field: 'format'},
        {id: 'groupBy', name: 'Group By', field: 'groupBy'},
        {id: 'isTarget', name: 'Is Target', field: 'isTarget'},
        {id: 'chart', name: 'Chart', field: 'chart'},
        {id: 'page', name: 'Page', field: 'page'}
    ];
    var options = {};
    grid = new Slick.Grid ('#charts', load (), columns, options);
@jcready

This comment has been minimized.

Copy link

commented Sep 10, 2013

Bootstrap 3 introduced a helpful/annoying selector (depending on who you ask) which, by default, will make every element on your page operate with the border-box box sizing model:

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

@mleibman will likely need to make a significant update to SlickGrid to get everything working smoothly with jQuery and box-sizing: border-box. Fortunately the jQuery team has attempted to resolve the issue with border-box and has provided work-arounds for special cases. I believe using outerWidth() as a setter will likely solve most of the problems SlickGrid has with border-box but I may be wrong.

jQuery 1.8 box-sizing: width(), css(“width”), and outerWidth()

Using box-sizing: border-box changes the CSS notion of the width of an element to include both the padding and the border dimensions, just the way you’d naturally measure it. jQuery versions before 1.8 were not fully trained in the ways of the border-box, but we’ve fixed this bug.

One thing that hasn’t changed is the return value of the .width() method. As it’s always been documented, it gets and/or sets the “content” width of an element, and that is regardless of the CSS box-sizing being used by the element. However, jQuery 1.8 now needs to check the box-sizing property whenever you use .width() so that it can decide whether it needs to subtract out the padding and border width. That can be expensive—up to 100 times more expensive on Chrome! Fortunately, most code doesn’t use .width() enough times for this to be noticeable, but code that gets the width of dozens of elements at once could be impacted.

There is a very easy way to avoid this performance penalty if it does impact your code. Simply use .css("width") instead of .width() to make it clear you want to get or set the actual width of the element as specified by the CSS. That doesn’t require jQuery to look at box-sizing. Remember, however, that .css("width") as a getter returns a string with “px” at the end, so you’ll want to use something like parseFloat( $(element).css("width") ) for situations where the result must be numeric.

And of course, everything mentioned here about .width() also applies to .height() as well; use .css("height") to skirt the performance penalty there.

Using .outerWidth() as a setter

In other dimensionally related news, jQuery’s .outerWidth() and .outerHeight() methods have been updated in 1.8 so that they can be used as setters. (jQuery UI has supported them as setters since UI version 1.8.4, but now it’s built into core.) To use .outerWidth() as a setter, pass an argument that is a number representing the outer width (CSS “content” width, plus padding and border width). And yes, this handles the box-sizing: border-box situation fine as well; it’s basically the same as setting the .css("width") in that case.

@jcready

This comment has been minimized.

Copy link

commented Sep 10, 2013

I believe you could also solve this issue by including the following CSS:

[class^="slickgrid_"],
[class^="slickgrid_"] div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

If you only have a single grid on your page and you know what it's CSS ID is going to be it might be safer to just do this (I'll assume the ID is #grid):

#grid, #grid div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
@Magicloud

This comment has been minimized.

Copy link
Author

commented Sep 11, 2013

Ah, I replaced all .width( in source to .outerWidth(, and it worked. Thank you.

@Magicloud Magicloud closed this Sep 11, 2013
@spidergeuse

This comment has been minimized.

Copy link

commented Dec 15, 2013

Thanks, I had the same issue and just did as mentioned above and it works.

@danbroun

This comment has been minimized.

Copy link

commented Jan 7, 2014

@Magicloud, @spidergeuse :
Have the same problem but I am not able to fix it.
So where exactly did you replace the .width( with .outerWidth( ? What jquery version do you use?

Hope you can help me.

@danbroun

This comment has been minimized.

Copy link

commented Jan 7, 2014

Solved the problem by adding the following to my css:

.gridStyle *, *:before, *.after {
box-sizing: content-box;
}

@mtraynham

This comment has been minimized.

Copy link

commented Jan 13, 2014

Just encountered this issue, thus here is a JSFiddle showing the bug:
http://jsfiddle.net/8TWEm/

Here is a JSFiddle using @jcready 's solution to fix:
http://jsfiddle.net/8TWEm/1/

This should really be re-opened, as it's quite an easy fix to include in the slick grid css.

@arbme

This comment has been minimized.

Copy link

commented Jan 18, 2014

@mtraynham
Thanks for the fix (http://jsfiddle.net/8TWEm/1/) but I have a slight problem. When the grid first loads the header columns are not aligned correctly with the row columns. How ever if you resize the columns the grid fixes itself.

capture

Any ideas on how this can be fix when it first loads?

Thanks

@mtraynham

This comment has been minimized.

Copy link

commented Jan 19, 2014

@arbme Interesting, I do not see that problem. What browser are you on? Chrome Version 31.0.1650.63 here.

It might be that the rules are different for other browsers. Try it without Bootstrap first to ensure the problem only exists when using Bootstrap with SlickGrid.

@arbme

This comment has been minimized.

Copy link

commented Jan 19, 2014

@mtraynham
Thanks for the response. I am using Firefox v26 and it is when the bootstrap.css is added to the page. The screenshot I provided it from your fix example (http://jsfiddle.net/8TWEm/1/)

@mtraynham

This comment has been minimized.

Copy link

commented Jan 19, 2014

@arbme Interesting. Firefox does it for me too. It seems to work if you set all Divs to respect the bug fix:
http://jsfiddle.net/8TWEm/2/

But then you'll find that Bootstrap may not work appropriately.

Even adding the "!important" css flag to the rule doesn't seem to work either, as I originally suspected Bootstrap was overriding our own fix:
http://jsfiddle.net/8TWEm/3/

What's strange is this has basically introduced the opposite of what the original bug is. OP's bug shows the chart formatting too far to the left, where we are now seeing it to the right.

@arbme

This comment has been minimized.

Copy link

commented Jan 19, 2014

@mtraynham
Is there any way to trick it to think its been resized or to rerender when its loaded?

@mtraynham

This comment has been minimized.

Copy link

commented Jan 19, 2014

@arbme
Most likely, we could figure out what get's triggered from resizing the column header and just call that on initialization. I tried just calling .render(), but that didn't seem to work.

@mtraynham

This comment has been minimized.

Copy link

commented Jan 21, 2014

@arbme So I was able to get this working in firefox by calling:

grid.autosizeColumns();

Seen here:
http://jsfiddle.net/8TWEm/8/

@brondavies

This comment has been minimized.

Copy link

commented Feb 8, 2014

I used

.slick-header *, *:before, *.after {
-moz-box-sizing: content-box;
box-sizing: content-box;
}

along with the call to

grid.autosizeColumns();
@Wexcode

This comment has been minimized.

Copy link

commented Apr 18, 2014

I was able to get this working just by applying box-sizing: content-box to .slick-header-column: http://stackoverflow.com/a/23162424/522877

@RaraituL

This comment has been minimized.

Copy link

commented Apr 28, 2014

I have the same problem with firefox, and grid.autosizeColumns(); fixed the issue. But unfortunately, autosizeColumns doesn't maintain the initial column widths specified in the config

@RaraituL

This comment has been minimized.

Copy link

commented Apr 28, 2014

I fixed the issue modifying 1 line of code in function createColumnHeaders() from slick.grid.js:

Where var header is defined, i changed .width(m.width - headerColumnWidthDiff) to .outerWidth(

ghost pushed a commit to NextCenturyCorporation/neon that referenced this issue Apr 28, 2014
…is fix is noted in their forums but has not made it to the product yet. See mleibman/SlickGrid#742 comments by RaraituL.
@DedrickEnc

This comment has been minimized.

Copy link

commented May 26, 2014

jcready thank you, the problem was solved by applying these rules :

#grid, #grid div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

rubiii added a commit to mindmatters/SlickGrid that referenced this issue Jun 24, 2014
@jimmyko

This comment has been minimized.

Copy link

commented Jul 22, 2014

I confirmed the NextCenturyCorporation/neon@65cd221 can fix the column header width mismatch problem.

@stjusha

This comment has been minimized.

Copy link

commented Jul 25, 2014

Column header width is fixed. BUT width is incorrect if column width is changed. You should change code in function applyColumnHeaderWidths():

if (h.width() !== columns[i].width - headerColumnWidthDiff) {
            h.width(columns[i].width - headerColumnWidthDiff);
        }

to

if (h.outerWidth() !== columns[i].width - headerColumnWidthDiff) {
            h.outerWidth(columns[i].width - headerColumnWidthDiff);
        }
@andrewholsted

This comment has been minimized.

Copy link

commented Oct 14, 2014

@RaraituL's one line fix worked for me instead of replacing all instances of .width() to .outerWidth()

@Adioud

This comment has been minimized.

Copy link

commented Dec 13, 2014

I've replaced all instance of .width() by .outerWidth(), and it runs normally now. I didn't get to fix it with other methods (neither change css content-box, nor only one .width() change nor //https://github.com/mleibman/SlickGrid/pull/885/files)
Works with FF and Chrome on page load without grid.autosizeColumns() call and without any problem on resize.
Thank you!

jesenko added a commit to jesenko/SlickGrid that referenced this issue Dec 31, 2014
Conflicts:
	slick.grid.js
@dizzy0ny

This comment has been minimized.

Copy link

commented Mar 20, 2015

is this fix in the latest version of slickgrid? or would i need to apply one of the recommended fixes above?

@6pac

This comment has been minimized.

Copy link

commented Mar 21, 2015

I'll look at this and try to apply a patch soon. That said, I'm using bootstrap and haven't noticed enough of a problem for it to even register with me. However it's worth noting:

  1. the behaviour of jQuery changed around 1.8 so the solution will depend on the version you're using. The master is at 1.7 and the alternate at 1.11.
  2. this is definitely related to the css 'border-box' setting, which bootstrap uses
  3. the two approaches are to
    (a) turn border-box off for the slickgrid elements using css (the simplest approach), or
    (b) modify the slickgrid code/css to work with and without border-box, but this would have to be tested under both jQuery versions
@6pac

This comment has been minimized.

Copy link

commented Mar 21, 2015

... to answer the question, currently this has not been patched on either master

afromogli pushed a commit to afromogli/SlickGrid that referenced this issue Apr 10, 2015
…tstrap 3:s box-sizing: border-box. Described more in detail in issue: mleibman#742
@6pac

This comment has been minimized.

Copy link

commented Jun 2, 2015

A patch for this issue has been added to the 'alternative master' repo. It should fix all cases.
Repo: https://github.com/6pac/SlickGrid
Latest release: https://github.com/6pac/SlickGrid/releases
Blog post: http://low-bandwidth.blogspot.com.au/2015/06/slickgrid-with-jqueryui-and-bootstrap.html

The latest release has added examples for Bootstrap and the jQueryUI Accordion that may help provide a standardised page for testing, and demonstrate a known good configuration.

@tanveer-ali

This comment has been minimized.

Copy link

commented Oct 8, 2015

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

jesenko added a commit to jesenko/SlickGrid that referenced this issue Jan 22, 2016
Conflicts:
	slick.grid.js
jesenko added a commit to jesenko/SlickGrid that referenced this issue Jan 22, 2016
@mzabuawala

This comment has been minimized.

Copy link

commented Nov 18, 2016

I had same issue on Firefox, It was fixed by adding below code in my CSS.

  .slickgrid,
    .slickgrid *,
    .slick-header-column {

            box-sizing: content-box;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            -ms-box-sizing: content-box;

    }
@6pac

This comment has been minimized.

Copy link

commented Nov 22, 2016

the patches to my repo should handle either 'border-box' or 'content-box', through the mechanism of jQuery 1.8+ which should handle them correctly.
It does appear that Firefox has an issue, however it appears to be something different again.

as such I'm leaving things as-is, and the above patches should be considered the official Firefox solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.