More than 12 columns

Hey, is it somehow possible to have more than the 12 Columns for the gridstack?

Instructions are here: https://github.com/troolee/gridstack.js#change-grid-width

Hey, i use sass example from that link, but when I use 20 cols, there is problem with dragging. When you hold item, its farer than it should be. Sorry for my english :)

Same issue as kasikn77

any updates here ?

@troolee

@troolee can we reopen this one, as this seems to be still an issue, or can you point how to make more than 12 columns

thanks in advance

@hiveww

@hiveww I resolved the issue a while back. You need to set your column number in both CSS and JS. Here are a few snippets of what I did

In CSS:

.grid-stack-item {
    $gridstack-columns: YOUR_COLUMN_WIDTH;

    @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-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

In JS:

//grid definition
  var options = {
      cellHeight: 500,
      cellWidth: 500,
      verticalMargin: 0,
      height: 0,
      width: YOUR_COLUMN_WIDTH,
      staticGrid: true,
      disableResize: true
  };
  $('.grid-stack').gridstack(options);

I hope that helps

@minghz

@minghz I also use sass in my project but it doesnt work. The 'shadow' while you dragging tile is above the correct place. That doesnt solve problem.

Hello there. Problem is also when we set up columns to 12 but height is defined also. My gridstack options:
var options = { width: 12, height: 8, float: false, acceptWidgets: '.grid-stack-item', disableResize: true, animate: true, draggable:{ enabled: true } };

I have the same issue with widths larger than 12. If I use 24 in both the sass and inside the javascript, I have to drag things approximately 50% more to see the dotted outline move to the correct spot.

this is still an issue.

make sure to read https://github.com/gridstack/gridstack.js#change-grid-columns and next section.
I have a 30 column demo (https://github.com/gridstack/gridstack.js/blob/develop/spec/e2e/html/810-many-columns.html) which last time I checked was fine

see #810 (which apparently might still brake ~100 columns ?
please post a reproduceable case on new bug and refer to these... thanks

you're right, i was just reading the documentation.

Here a SASS code for 64 columns, sorted by CSS class and rounded percentage numbers to 2 decimal places.

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

    $gridstack-columns: 64;

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

Version without rounding if you want the full precision:

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

    $gridstack-columns: 64;

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

@xresch

@xresch you code incorrectly rounds to 2 digit, THEN multiply by $i so you rounded error will get multiplied...

by the way the rounding error code is fixed in 2.x with #1299 (see #810)

@adumesny

@adumesny yeah I didn't find a 100% perfect solution with pure Sass limiting the digits without using some command line params(I only use some online sass tools). The result works fine with me and the permille deviations are not visible on the UI.

I updated my comment to include a version with full precision.

@xresch

@xresch just round after you multiply by $i so the error isn't compounded...

@adumesny

@adumesny ah now I got you, thank you, fixed and updated in the comment.

Navigation Menu

Repository navigation

More than 12 columns #135

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

More than 12 columns #135

Description

Activity

Dimosthenis commented on Apr 22, 2015

kasikn77 commented on Nov 14, 2016

minghz commented on Dec 6, 2016

hiveww commented on Jan 17, 2017

hiveww commented on Jan 17, 2017

minghz commented on Jan 19, 2017

kasikn77 commented on Jan 19, 2017

kasikn77 commented on Feb 3, 2017

randellhodges commented on Feb 27, 2017

dfenerski commented on Jun 25, 2020

adumesny commented on Jun 25, 2020

dfenerski commented on Jun 25, 2020

xresch commented on Jul 21, 2020

adumesny commented on Jul 21, 2020

xresch commented on Jul 21, 2020

adumesny commented on Jul 21, 2020

xresch commented on Jul 21, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions