Misaligned SlickGrid Columns

[ghost]

I've added several columns to my SDI display. When rendered, the columns and their headers are out of alignment:

If, I slightly resize the window, the alignment is corrected:

I'm using Chromium Version 30.0.1599.114 (229842).

This is only a minor bug. I'm guessing its some nuance with SlickGrid?

[pauleveritt]

I gave a try with this on Chrome on OS X. Couldn't reproduce. I downloaded Chromium (for OSX, today's build) and couldn't reproduce. Here is a screencast of me resizing stuff:

http://www.screencast.com/t/Eer7wvC1hfis

If you can provide a public URL I can either test against or pull locally and attest against, I can give it a try.

[ghost]

Hi Paul,

Thanks for looking into it. I'm still seeing this problem. I just took this screenshot from the substanced demo site (http://demo.substanced.net/manage/binder_0/@@contents)

The 'creator' column is misaligned with the column header. The effect is more pronounced when more columns are involved. When I resize the window, the columns align correctly. I checked and I'm also seeing this problem on win 7 & firefox (plus linux and chromium from my original post).

I'm guessing it might be related to this SO entry http://stackoverflow.com/questions/8559487/slick-grid-header-row-cell-alignment

[domenkozar]

I can confirm the bug on 32.0.1700.19 (235778) (Linux)

[pauleveritt]

Looks like I'll need to get access to Chromium/Linux.

--Paul

On Feb 10, 2014, at 3:37 AM, Domen Kožar [email protected] wrote:

I can confirm the bug on 32.0.1700.19 (235778) (Linux)

—
Reply to this email directly or view it on GitHub.

[ghost]

I poked around some more, and I found a couple of solutions from mleibman/SlickGrid#742

I tried both of these and they do work for me.

1. add the following to sdi_bootstrap.css or .less:

#sdi-contents-table-sg, #sdi-contents-table-sg div {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

2. call grid.autosizeColumns(); when the page loads. I did this through firebug/developer tools with:

var grid = $('#sdi-contents-table-sg').data('slickgrid').grid;
grid.autosizeColumns();

But I imagine that could be worked in with the slickgrid initialization, somewhere.

I'm afraid this is far enough outside my comfort zone I don't know the merits of either approach. Hopefully someone with a better understanding of bootstrap and slickgrid can weigh in?

[blaflamme]

I think UI should be done CSS first and JS if you have no other choices. If you include BS mixins in your less file you can use .box-sizing('content-box') in your selector:

#sdi-contents-table-sg, #sdi-contents-table-sg div {
  .box-sizing('content-box');
}

[mcdonc]

I did what I thought would work here (adding the less that blaflamme suggests above, regenerating the css, adding grid.autosizeColumns() in various places in the JS and template) but I can't seem to get it to do the autosizing at first render time. If I subsequently go to the console and do what @cahman did, it indeed does size the columns, so I'm sure it's just a matter of putting the call to autosizeColumns in the "right" place, wherever that is.

[mcdonc]

See 851be80 for my attempted fix, if anyone can help diagnose.

[reebalazs]

I can find the right place. @mcdonc, could you reproduce it and on which browser?

[mcdonc]

@reebalazs yeah i can reproduce it .. first load of http://demo.substanced.net/manage/ordered_binder/@@contents ("Creator" header is too far left, resize window and it snaps back to the right position) in Chromium / Linux.