Stack Overflow
Stack Overflow

Questions tagged [gridster]

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.

Overview

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.

HTML syntax

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Links

Related tags

276 questions
2
votes
0 answers

Centered masonry content inside of gridster

I need to put a dynamic tile layout inside a gridster widget. I have put there masonry grid but I want the content to be centred instead of floated left. I have found that I need to change isFitWidth property to true and a fixed sized columnWidth…
Piotr Ptak
  • 461
  • 6
  • 15
2
votes
1 answer

Grid Element initialising vertically Gridster.js

Well I was using Gridster.js to make a dashboard like environment and thus wrote this following code. The Problem is that all the elements stack vertically when actually I want them to be initialised according to their row and col numbers specified…
Rishabh Malhotra
  • 269
  • 3
  • 13
2
votes
1 answer

Angular ng-repeat, Gridster, and Web Components are conflicting

I am using angular-gridster to show a grid in my application, but I am seeing some strange behavior, of which my search efforts have yielded nothing. Here is my code for showing a simple grid in gridster::
    …
Mike
  • 4,071
  • 21
  • 36
2
votes
0 answers

Move items between two or more grid-stack containers

I would like to have two or more grid-stack (https://github.com/troolee/gridstack.js) containers and move the items (portlets) between them. How to register this containers, so the portlets can be moved from one to another container? And after that,…
Mutatos
  • 1,675
  • 4
  • 25
  • 55
2
votes
1 answer

how to use angular-gridster and highcharts-ng directives together in angularjs

I am using angularjs-gridster (https://github.com/ManifestWebDesign/angular-gridster) with higharts-ng directive (https://github.com/pablojim/highcharts-ng/blob/master/README.md) I am trying to generate these highcharts inside the grid cells. My…
Mohit Srivastava
  • 1,909
  • 1
  • 13
  • 18
2
votes
1 answer

Gridster grid height not correct when using add_widget method

I am using the gridster plugin on my site and inserting the content using the add_widget method as the widget content is pulled in from a database. However, when the widgets are added, the height of the grid is not adjusted to the content - it stays…
Tom
  • 12,776
  • 48
  • 145
  • 240
2
votes
1 answer

Gridster not appearing under jQuery variable

I'm using Gridster to render a layout of tiles in my app, using NodeBB as a base. The code is as follows: