New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gridstack movement and resizing is constrained to the y-axis #868

Closed
StefanM98 opened this Issue Apr 30, 2018 · 12 comments

Comments

Projects
None yet
2 participants
@StefanM98
Contributor

StefanM98 commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips Apr 30, 2018

Member

@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!

Member

radiolips commented Apr 30, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 Apr 30, 2018

Contributor

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.

Contributor

StefanM98 commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips Apr 30, 2018

Member

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.

Member

radiolips commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 Apr 30, 2018

Contributor

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.

Contributor

StefanM98 commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips Apr 30, 2018

Member

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!

Member

radiolips commented Apr 30, 2018

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

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 Apr 30, 2018

Contributor

Sounds good! Thank you very much for your support!

Contributor

StefanM98 commented Apr 30, 2018

Sounds good! Thank you very much for your support!

@radiolips

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips May 1, 2018

Member

@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.

Member

radiolips commented May 1, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 May 1, 2018

Contributor

@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.

issue

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.

Contributor

StefanM98 commented May 1, 2018

@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.

issue

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

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips May 1, 2018

Member

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.

Member

radiolips commented May 1, 2018

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

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 May 1, 2018

Contributor

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! 👍

Contributor

StefanM98 commented May 1, 2018

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! 👍

@StefanM98 StefanM98 closed this May 1, 2018

@radiolips

This comment has been minimized.

Show comment
Hide comment
@radiolips

radiolips May 1, 2018

Member

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

Member

radiolips commented May 1, 2018

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

@StefanM98

This comment has been minimized.

Show comment
Hide comment
@StefanM98

StefanM98 May 1, 2018

Contributor

Will do! :)

Contributor

StefanM98 commented May 1, 2018

Will do! :)

StefanM98 added a commit to StefanM98/gridstack.js that referenced this issue May 1, 2018

Updated SASS code snippet in README.md
I updated the SASS code snippet in README.md to more directly reference the gridstack item, and avoid problems where the widths of the gridstack items, are still set by gridstack.css and not this code. See issue #868 (gridstack#868) for an example.

@StefanM98 StefanM98 referenced this issue May 1, 2018

Merged

Updated SASS code snippet in README.md #869

3 of 3 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment