Issue with custom columns

[bastigerner]

Hey,

I'm currently trying to modify the amount of the grid columns.
CSS code and init options have been added.

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

  $gridstack-columns: 30;

  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; }
  }
}

I'm uisng Windows 10 with Chrome. Gridstack.JS version is 3.0.0 HTML5 version.

https://jsfiddle.net/wgk328cn/ (copied my code, but here it works.....)

This is what happens on my website...
https://user-images.githubusercontent.com/10349466/131824591-fac00ecd-2c67-4b61-a008-69e170fd18dd.mp4

Till reaching the 12 column mark it has the normal column spacing...
Going further will result in the expected behaviour resizing according to the coulm amount.

[bastigerner]

Pretty much what I am trying to achieve is a similiar behaviour like the react grid layout, which for example can be found on the Azure DevOps Dashboard.
When resizing your browser window the grid components should not resize. I am trying to achieve this via modifiying the columns and setting the width of the grid fixed to 5000px.

If someone has a different approach feel free to let me know.

[bastigerner]

Okay, so adding !important to the first 12 rows fixes the resize-behaviour of failing till hitting the 12th column. But now a different problem appears... When dragging an item around it now gets stuck at the second column and i can only move it up or down.

[bastigerner]

Okay, so adding !important to the first 12 rows fixes the resize-behaviour of failing till hitting the 12th column. But now a different problem appears... When dragging an item around it now gets stuck at the second column and i can only move it up or down.

As soon as I add the !important statement to the gs-x left: part it fails when trying to move beteween columns

[adumesny]

looks to me you don't have the right extra CSS (see the doc) - your demo doesn't include the CSS (not SASS)for 30 columns.

[bastigerner]

looks to me you don't have the right extra CSS (see the doc) - your demo doesn't include the CSS (not SASS)for 30 columns.

So as far is I am aware of the documentation. If I want to have more than 12 columns, then I can use the SASS code snippet to create the needed CSS code? Then add the created CSS code into my project. Tell the Grid in the init how many columns I want to have and then it should be done?

Please correct me if I am wrong. Becausei get every coulm after the 12th to work.

[bastigerner]

Okay I got it working using the SCSS file included in the npm package. Weird. Still thank you very much and great work keep it up!