gridstack.js: Width options doesn't works

Hi @troolee,

I am trying to use the gridstack width, changing for 3. Although, this change to 3 columns and the width of external div(‘.grid-stack’) are correct, the width value of “item” stayed in 8,3% and not in 33%.

Is getting so:

https://cloud.githubusercontent.com/assets/3621189/5599368/3ddd6898-92ac-11e4-8a2c-acd65f9f1e32.png

When it should stay that way:

https://cloud.githubusercontent.com/assets/3621189/5599367/3dd99434-92ac-11e4-9cbd-80cc718b62e2.png

The code are:


var options = {width: 3,cell_height: 35,vertical_margin: 10,animate: true};


$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');

// Begin For grid.add_widget("<div class='grid-stack-item' data-gs-no-resize='true'><div class='grid-stack-item-content'><div class='grid-heading'><small>Label</small></div><div class='grid-body'><div class='text-center'> </div></div></div></div>', 0, 0, 4, 2, true); //End For

Att Mateus Giuliano

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

Hi,

it’s because you use a default CSS sheet which is declare 12 column grid. For your case you need to change .grid-stack-item[data-gs-width="X"] and .grid-stack-item[data-gs-x="X"] classes to be:

.grid-stack-item[data-gs-width="3"]  { width: 100% }
.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }

.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }

I will update documentation.

troolee on Jan 5, 2015