CODEWITHSUNDEEP
javascriptjquerygridstack
hot_penguin
hot_penguin

Reputation: 165

How to decrease minimal height and weight of a GridStack grid element?

I'm using GridStack.js library and I have to implement keyboard using it. The problem is that if I make screen width (in Chrome DevTools) less than 800-1000px then all the grid elements change their width to 100% (though they weren't this before). The example is here https://gridstackjs.com/#demo So as I guess there is certain minimal height elements have in this library. Or the entire .grid-stack element has minimal width and if the width is less then minimal then all .grid-stack-items get width: 100%. So the question is how to fix that and set my own minimal height. I can change width using this code:

.grid-stack>.grid-stack-item {

  $gridstack-columns: 12; // here I can set columns number

  min-width: (100% / $gridstack-columns);

  @for $i from 1 through $gridstack-columns {
    &[gs-w='#{$i}'] {
      width: (100% / $gridstack-columns) * $i;
    }

    &[gs-x='#{$i}'] {
      left: (100% / $gridstack-columns) * $i;
    }

    &[gs-min-w='#{$i}'] {
      min-width: (100% / $gridstack-columns) * $i;
    }

    &[gs-max-w='#{$i}'] {
      max-width: (100% / $gridstack-columns) * $i;
    }
  }
}

But even if I change columns number and my elements become smaller in width then the height remains the same as before.

If my config looks this:

grid.load([{ "w": 1, "h": 1 }]);

...and I have 12 columns then this element is squere. But if I change columns number to 24 then the element becomes a rectangle (though width and height in config are equal). I want height and width of a cell to be equal always.

Please provide a better way how to set minimal height and width of GridStack elements to remain them adaptive to the screen width.

Upvotes: 3

Views: 2239

Answers (1)

hot_penguin
hot_penguin

Reputation: 165

While initialization:

const grid = GridStack.init(options);

You need to add these to the options:

const options = {
        cellHeight: 50,
        cellWidth: 50,
        disableOneColumnMode: true
      };

Upvotes: 2

Related Questions