Gridstack movement and resizing is constrained to the y-axis

[StefanM98]

Firstly, I would like to thank the developer(s) of gridstack for providing such an awesome and useful plugin! Great work!

I will greatly appreciate any help!

Thanks,
Stefan

Subject of the issue

When moving or resizing an item, the placeholder acts as expected, while the gridstack item seems to be constrained to only the y axis. This is most likely an issue with my code and not gridstack.

My environment

• gridstack.js - 0.3.0
• jQuery - 3.3.1
• jQuery-UI - 1.12.1
• Underscore.js - 1.9.0
• Any Browser

Steps to reproduce

I have made a CodePen demonstrating my problem.

In this particular example I have a grid with a width of 35. To accomplish this, I used the SASS snippet included in the README of this project. I simply changed $gridstack-columns: 12; to $gridstack-columns: 35; and then used Sassmeister to convert the SASS to CSS and used that in my example code.

Expected behavior

The ideal behavior would be to either move with the placeholder, or not move at all until mouse up.

Actual behavior

When dragging the item (either moving or resizing) the placeholder acts as expected. However, the gridstack item itself will ONLY move with the pointer up and down, as if it is constrained to the y-axis.

[radiolips]

@StefanM98 I believe I can help you out! I looked in your example, and I see that in gridstack.css, we have the following:

.grid-stack > .grid-stack-item {
    min-width: 8.3333333333%; 
    position: absolute;
    padding: 0;
}

The problem is that the width for yours is smaller. In other words, the code is expecting the width to be n%, and the CSS is showing a greater number. It looks like your CSS might not be setting the min-width for your item!

[StefanM98]

Thanks for the quick response!

Hmm.. I think I understand. So with 35 columns, the calculated width for data-gs-min-width="1" and data-gs-min-width="2" are bellow the min-width (8.3333333333%) set in gridstack.css causing this problem. Is that correct? If so, does that mean gridstack cannot support this many columns?

Forgive me if I misinterpreted you explanation.

[radiolips]

I haven't tested it myself, but you should actually be able to override those values in your own css, so you should be able to use as many columns as you want.

[StefanM98]

I have attempted overriding those values in my css but the issue still occurs. Perhaps I'm doing it wrong? This is the css I added:

.grid-stack > .grid-stack-item {
    min-width: 2% !important; 
}

2% is less than any of the data-gs-min-width or data-gs-width my items have.

Another thing I found interesting is that when a item has data-gs-x set to 0, the problem does not occur until it is changed to another value. Not sure why this happens but I thought it was worth mentioning. To reproduce this, simply move a element in the pen that is positioned all the way to the left (Items 1 and 4) and you'll see that they behave as expected.

[radiolips]

Oh! My mistake. Turns out there were two problems. The change you made should be fine, but there's something else causing the item to only move vertically. I'll give you an update when I know what's going on!

[StefanM98]

Sounds good! Thank you very much for your support!

[radiolips]

@StefanM98 I have an answer for you! Stop using !important :P. You're overriding the inline styles that change the coordinates of the widgets when they're being dragged.

[StefanM98]

@radiolips I removed !important from all the css rules and I've updated the pen accordingly. That did solve the problem with the item only moving vertically, but it caused another issue. Now at various points in the left side of the grid, the placeholder is completely off as shown in the image bellow.

Removing !important from
&[data-gs-x='#{$i}'] { left: 100% / $gridstack-columns * $i; }
in particular resulted in this behavior. Removing it from the other rules did not seem to have any effect. Any idea what the cause of this could be?

Thanks again for the help.

[radiolips]

It could be related to the first issue I had noticed yesterday; I'm seeing that the widths of the widgets are set by gridstack.css and not your pen css. It's got a more exact match (.grid-stack > .grid-stack-item[] vs .grid-stack-item[]). Perhaps getting your CSS more specific will fix these problems? I didn't put together the SCSS, but I think it probably needs to be updated to make it more specific.

[StefanM98]

That was the problem! I adjusted the SASS to more directly reference the gridstack item and that resolved the issue. Bellow is the updated SASS if you would like to update your README with it ;)

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

    $gridstack-columns: 35;

    @for $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack > .grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack > .grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

Thanks a lot for helping me figure this out! 👍

[radiolips]

No problem. You should put in a PR with an update to the README, @StefanM98 !

[StefanM98]

Will do! :)

[ashutosh-kendurkar]

Thank you StefanM98, I too am facing the same issue with 30 column grid, I did use your improved SCSS and generated CSS from that, but it was still taking the style from gridstack.min.css, I assume you must have used !important to override the basic styles, so I have done that, can you please confirm that?

it has resolved the y-constraint issue, but now when I use the !important along with new styles, it creates another problem - whenever I resize the widget it changes location of the widget even though there is another widget at that location and also changes the location of other widget.

you can notice it in the screenshot below, appreciate any help on this.

[adumesny]

@ashutosh-kendurkar are you using the latest 2.0.2 ?

also the doc https://github.com/gridstack/gridstack.js#custom-columns-css
spells out what you need to do, but I realize you might need to make .grid-stack > .grid-stack-item more specific (add you own class or use .grid-stack-30) as the DOM will actually be class="grid-stack grid-stack-30 grid-stack-instance-random# in your example.

[ashutosh-kendurkar]

thanks for the quick reply @adumesny

I am using "gridstack.js 1.2.0" in a .Net application with vanilla JS. I did try to upgrade today briefly to 2.0.2 but it failed with lots of console errors, so I will try that over the weekend.

I basically want to have smaller breakpoints for widget height and width, height is possible with setHeight() but width is only possible with more number of columns, but then I dont understand why widget starts moving on resize!

I will try your suggestion on custom class for .grid-stack > .grid-stack-item tomorrow.

[adumesny]

2.0.0 has the "many column" round off error fixed - https://github.com/gridstack/gridstack.js/releases/tag/v2.0.0

[ashutosh-kendurkar]

@adumesny thanks, I will try that.