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

Gridster responsive? #475

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions