CODEWITHSUNDEEP
javascriptcssslickgrid
Premanshu
Premanshu

Reputation: 626

slick grid header row cell alignment

I'm using a slick grid to display data in grid. Slick grid calculates all the stuff like height, width when that particular grid is created and the grid looks really fine. The trouble foments when the grid is created but is hidden and on action of something else (checkbox/radio button select) the grid becomes visible. this time the calculation goes awry and the headers and row cells (column for the header) are not aligned vertically.. enter image description here

I m unable to understand how to control this. If anyone else too has suffered at the hands of the slick grid and have been able to defend themselves please bare the ammunitions.

In anticipation, Premanshu

Upvotes: 14

Views: 9288

Answers (7)

Wex
Wex

Reputation: 15695

I was able to get this to work in bootstrap 3 (an environment where box-sizing is set to border-box) just by applying box-sizing: content-box to the .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column {
  -webkit-box-sizing: content-box;                                                              
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

Just be careful when modifying the border properties of .slick-header-column. I was able to remove the border on the right by setting the color to transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
  border-right-color: transparent;
}

Note: You can play around with the selector specificity - the selector you're overwriting is:

.slick-header-column.ui-state-default { ... }

Upvotes: 7

cooltodinesh
cooltodinesh

Reputation: 225

Resolved it for me. This is what i was doing : 1. Initialise grid 2. append data to it 3. Present it using modal of div containing grid

To Resolve i did this : 1. Present it using modal of div containing grid 2. Initialise grid 3. Append data

Upvotes: 0

coquin
coquin

Reputation: 1386

None of these solutions worked for me, may be because SlickGrid's code changed since 2012 :) I found a solution in this post, it's similar to @Wex's, but with tiny differences:

.slickgrid, 
.slickgrid *,
.slick-header-column {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

Where .slickgrid is a selector of a grid container element.

Upvotes: 13

Alan Bell
Alan Bell

Reputation: 401

I had a similar problem when using it on a page that had twitter bootstrap css on it. The solution was to override the box-sizing to content-box

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

probably should figure out exactly which classes really need it, but that sorted things for me.

Upvotes: 6

James
James

Reputation: 512

I had the exact same problem and after reading the answers from @Premanshu and @Tin I found a different route to solve it.

Basically you need to skip an event cycle and let the DOM catch up before you display the grid this will allow it to find the right column widths. I used setTimeout to do it.

    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
    grid = new Slick.Grid(myGrid, data, columns, options);


   // ... later on, append the container to the DOM and initialize SlickGrid
   setTimeout(function(){
     myGrid.appendTo(that.$el);
     grid.init();
   },1);

Upvotes: 1

Tin
Tin

Reputation: 9082

This is supported and shouldn't happen. In fact, most of the examples (including http://mleibman.github.com/SlickGrid/examples/example1-simple.html) have that same implementation just to make sure it works correctly.

Can you include a jsfiddle.net repro?

Upvotes: 0

njr101
njr101

Reputation: 9619

I had a similar problem when dynamically displaying/hiding grids using JQuery .show() and .hide().

If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.

My code looks roughly like this:

  <div id="mygrid" style="visibility: hidden"></div>

  $grid = $("#mygrid")

  grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);

  // Hide grid by default, remembering to remove the visibility style
  $grid.hide();
  $grid.css("visibility", "visible");

  // You can now show and hide the grid using normal jQuery methods
  $grid.show();
  $grid.hide();

Once it is initialised and the visibility: hidden; property is removed, I'm using .hide()and .show() but I suspect this will work if you manipulate the display: none; attribute directly if you're not using JQuery.

Hope this helps.

Upvotes: 2

Related Questions