Gridster responsive?

[ghost]

Is it possible to make gridster responsive? I love your product but would like to use it on a mobile website. With the change of orrientation i would like the tiles to automatically reorder.

Is this possible?

Regards,
Bram

[kenju254]

@BramCrins have you found a way round this am also looking into making gridster responsive as well

[iamusman]

@BramCrins And @kenju254

Here is my solution for making gridster responsive....

/*Just add this css for responsive gridster */
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 8.34091%;
}
.gridster .gs-w[data-col="1"] {
left: 0%;
}
.gridster .gs-w[data-sizex="2"] {
width: 17.43182%;
}
.gridster .gs-w[data-col="2"] {
left: 9.09091%;
}
.gridster .gs-w[data-sizex="3"] {
width: 26.52273%;
}
.gridster .gs-w[data-col="3"] {
left: 18.18182%;
}
.gridster .gs-w[data-sizex="4"] {
width: 35.61364%;
}
.gridster .gs-w[data-col="4"] {
left: 27.27273%;
}
.gridster .gs-w[data-sizex="5"] {
width: 44.70455%;
}
.gridster .gs-w[data-col="5"] {
left: 36.36364%;
}
.gridster .gs-w[data-sizex="6"] {
width: 53.79545%;
}
.gridster .gs-w[data-col="6"] {
left: 45.45455%;
}
.gridster .gs-w[data-sizex="7"] {
width: 62.88636%;
}
.gridster .gs-w[data-col="7"] {
left: 54.54545%;
}
.gridster .gs-w[data-sizex="8"] {
width: 71.97727%;
}
.gridster .gs-w[data-col="8"] {
left: 63.63636%;
}
.gridster .gs-w[data-sizex="9"] {
width: 81.06818%;
}
.gridster .gs-w[data-col="9"] {
left: 72.72727%;
}
.gridster .gs-w[data-sizex="10"] {
width: 90.15909%;
}
.gridster .gs-w[data-col="10"] {
left: 81.81818%;
}
.gridster .gs-w[data-sizex="11"] {
width: 99.25%;
}
.gridster .gs-w[data-col="11"] {
left: 90.90909%;
}

/Work around for devices less than 768px/
@media screen and (max-width: 767px) {
.gridster > * {
padding: 0;
width: 100% !important;
}
.gridster .gs-w {
list-style: none;
}
.gridster .gs-w[data-sizex="1"] {
width: 100%!important;
}
.gridster .gs-w[data-col="1"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="2"] {
width: 100%!important;
}
.gridster .gs-w[data-col="2"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="3"] {
width: 100%!important;
}
.gridster .gs-w[data-col="3"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="4"] {
width: 100%!important;
}
.gridster .gs-w[data-col="4"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="5"] {
width: 100%!important;
}
.gridster .gs-w[data-col="5"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="6"] {
width: 100%!important;
}
.gridster .gs-w[data-col="6"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="7"] {
width: 100%!important;
}
.gridster .gs-w[data-col="7"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="8"] {
width: 100%!important;
}
.gridster .gs-w[data-col="8"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="9"] {
width: 100%!important;
}
.gridster .gs-w[data-col="9"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="10"] {
width: 100%!important;
}
.gridster .gs-w[data-col="10"] {
left: 0%!important;
}
.gridster .gs-w[data-sizex="11"] {
width: 100%!important;
}
.gridster .gs-w[data-col="11"] {
left: 0%!important;
}
}

And to make it more flexible in mobile devices and to make proper colomn count this little snippet may help you further.

                                    dashletCount = 1;
                                     tempRow = 1;
                                    if ($(window).width() <= 768)
                                        {
                                            tempData.col = 1;
                                            tempRow = tempData.sizey;
                                            tempData.row = dashletCount;
                                            dashletCount += tempRow;
                                        }

[ghost]

Thanks @iamusman. I will give it a try. If i manage it i will post a fiddle.

[KoltonG]

Check this issue here, @rebugger added a resize_widget_dimensions() where you can change the initialized width and height that you specified in widget_base_dimensions:

I used it when the screen resize but you could use it when orientation is changed

function gridsterResize(){
  var gridster = $(".gridster ul").gridster().data('gridster');

  gridster.resize_widget_dimensions({
    widget_base_dimensions: [NEW WIDTH, NEW HEIGHT],
  });

[Misiu]

@KoltonG will this work with bootstrap 3 responsiveness? When resizing webpage at some point layout is changed. I need to update gridster every time I change website size. I'll be grateful for guidance.

[KoltonG]

@tjagusz This will work with bootstrap 3 responsiveness since this is mainly javascript implementation where bootstrap is using media queries for the responsiveness aspect. Simply check the screen size with JS and when you hit a certain condition you can resize gridster appropriately.

To change the size on resize, just check the window resize event and once that is fired, call the above method and chose your widget_base_dimension. I personally did not chose a static value for the widget_base_dimension since the size of the screen can be so dynamic, so I chose it relative to the size of its container after the resize even is fired.

Let me know if you need more explanation but the outcome can be easily personalized with this resize_widget_dimensions().

[Tropicalista]

An example would be great. Thanks!!!

[dezudas]

@iamusman I need help to make it responsive. Your css works perfect, but where should that script be implemented, all my items are getting overlapped.

SASS code with some effect

$totalCols: 4 !default;
        .gridster {
            opacity: 1;
            -webkit-transition: opacity .6s;
            -moz-transition: opacity .6s;
            -o-transition: opacity .6s;
            -ms-transition: opacity .6s;
            transition: opacity .6s;
          & > * {
            padding: 0;
            width: 100% !important;
          }
          .gs-w {
            background: #FFF;
            border:1px solid $gray1;
            cursor: pointer;
            list-style: none;
            @for $i from 1 through $totalCols {
              &[data-sizex="#{$i}"] {
                width: 88% / $totalCols * $i;
              }
              &[data-col="#{$i}"] {
                left: 104% / $totalCols * ($i - 1);
              }
            }
          }
        }

[jenskastensson]

@iamusman and @dezudas
I pasted the above css snippet to the end of dashboard.css (except the last '}' which I reckon is a mistake). I tested various screen sizes with chrome emulator, however I couldn't see any difference at all, what am I doing wrong?