paradox
paradox

Reputation: 71

How to resize widget in gridstack to our custom gs-width, gs-x, gs-min-width, gs-max-width?

I have tried to resize my widget to decimal points like 1.5, 2.5. But, gridstack does not support the decimal points in grid-stack-item[data-gs-x], grid-stack-item[data-gs-width], grid-stack-item[data-gs-min-width], grid-stack-item[data-gs-max-width].

The supported points by default is 1,2,3,4,5,6,7,8,9,10,11,12. I need to resize the widget to 1.5. So, I have added the following css changes in the https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.4/gridstack.min.css source, which I have downloaded and using it. The changes I have made is

.grid-stack>.grid-stack-item[gs-w="1.5"] {
    width: 12.49999999995%
}

.grid-stack>.grid-stack-item[gs-x="1.5"] {
    left: 12.49999999995%
}

.grid-stack>.grid-stack-item[gs-min-w="1.5"] {
    min-width: 12.49999999995%
}

.grid-stack>.grid-stack-item[gs-max-w="1.5"] {
    max-width: 12.49999999995%
}

But, after adding these no effect, I cannot resize to 1.5 widget size.

Also, I tried in the jsFiddle too

Html

<h1>gridstack.js base demo for issues</h1>
<p>Fork and modify me to demonstrate your issue when creating an issue for gridstack.js</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />

<div class="grid-stack"></div>

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  float: false
};
var grid = GridStack.init(options);

var count = 0;
var items = [
    {x: 0, y: 0, w: 2, h: 2},
    {x: 2, y: 0, w: 2},
  {x: 3, y: 1, h: 2},
  {x: 0, y: 2, w: 2},
];

addNewWidget = function () {
  var node = items[count] || {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    w: Math.round(1 + 3 * Math.random()),
    h: Math.round(1 + 3 * Math.random())
  };
  node.content = String(count++);
  grid.addWidget(node);
  return false;
};

addNewWidget();
addNewWidget();

Css

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

and gridstack css from the cdn downloaded

Upvotes: 0

Views: 1091

Answers (0)

Related Questions