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
3 answers

angular gridster 2 resize a widget using a button

i have the gridster item as below and using https://github.com/tiberiuzuld/angular-gridster2 …
Vik
  • 8,721
  • 27
  • 83
  • 168
2
votes
1 answer

Placing one HTML element(div) over another(li)

I am using Gridster along with Interact.I basically want to add images on the widgets with the help of Interact.For now I am just trying to place the interact widget on the gridster widget.But when I try to place the interact widget over gridster…
NewBie
  • 3,124
  • 2
  • 11
  • 19
2
votes
1 answer

Making textbox size relative to widget size in gridster

I extract text from JSON variable and place it on the gridster widget dynamically.I want the text box on the widget to display text in a beautiful way with help of CSS.One of my aims is to display text box exactly inside the size of the grid(if grid…
NewBie
  • 3,124
  • 2
  • 11
  • 19
2
votes
1 answer

Gridster inside Gridster

I want nested gridster (gridster indside gridster).Just similar to Nested Gridstack For this I wrote my Gridster code by reading some online content.But I am not getting expected results. HTML Code
NewBie
  • 3,124
  • 2
  • 11
  • 19
2
votes
1 answer

angular2gridster add remove button (x) on right hand corner

I want the widget on the grid to have remove button on top right hand corner. Is there a option that need to be set to enable it. If not how to display the remove button (x) on the right hand corner?
helloworld
  • 31
  • 4
2
votes
1 answer

Angular gridster moving issue

I'm trying to create an example using angular gridster but I'm not able to reach my goal. All I want to do is that if I move item A between item B and item C, item C will be pushed to the right, item B will be pushed to the left, and item A will…
Med
  • 241
  • 1
  • 6
  • 23
2
votes
1 answer

Angular not binding correctly with Gridster

So I'm using both Angular and the Gridster frameworks but I'm having this issue: With Gridster, I've implemented a button that allows the user to add (and remove) panels like this: $(document).on("click", "#addservice", function () { var gridster…
Whirlwind991
  • 485
  • 5
  • 17
2
votes
0 answers

Dynamically moving ruby gem dashing number widgets

Working with the ruby gem Dashing making dashboards. I have multiple number widgets and I'm trying to see if there is a way to move the widgets based on the value. The idea is having the highest number values first. My thoughts are if it is possible…
Brian Smith
  • 117
  • 8
2
votes
0 answers

Shiny Gridster dynamicly adjust margin sizes

I am using the 'Add-on package for using the Gridster library with Shiny', (https://github.com/wch/shiny-gridster), which is downloadable by using the below: devtools::install_github("wch/shiny-gridster") But I would like the size of the gridster…
h.l.m
  • 13,015
  • 22
  • 82
  • 169
2
votes
0 answers

Gridster hanging when the widgets are of large sizes

I am not quite sure if its a gridster issue but any help is greatly received. When I add multiple widgets of size 13x16 (imagine the widget size as large enough to cover an average PC screen) the browser just hangs (Browser Not Responding). Firebug…
PK.Karthikeyan
  • 21
  • 2
2
votes
0 answers

Slowdown when using gridstack within a bootstrap panel

I'm using Gridstack.js to create a grid of draggable panels and it works great. When I put my grid inside a Bootstrap "panel", things are really slow and unresponsive when I drag large panels. Very strange. Here's my markup:
Japes55
  • 163
  • 1
  • 9
2
votes
1 answer

Remove widget added dynamically just before

I'm doing a dashboard using Gridster. I have next code html:
2
votes
1 answer

Gridster auto resize by content height

I am trying to append content inside a Gridster widget but with no luck for two days already. I tried with: .resize_widget( $widget, [size_x], [size_y], [reposition], [callback] ) but the sizes x and y only accept numbers - its default re-sizing…
Alister Greenpan
  • 133
  • 2
  • 11
2
votes
3 answers

Angular Gridster make draggable only for particular part inside grid

I am using ManifestWebDesign Angular Gridster and not able to enable drag only for a particular portion of the grid as shown in the Gridster Demo example below. Expected to work like Gridster Demo Currently using the angular gridster configuration…
Sudarsan GP
  • 1,194
  • 14
  • 22
2
votes
0 answers

Can I drag and drop tiles(gridster tiles) using keyboard

currently im working on gridster using which I can drag and drop tiles using the mouse. There are callbacks like "options.drag"(call back executed when mouse is moved during dragging), "options.start"(call back when the drag starts) defined in…
balaji
  • 774
  • 1
  • 16
  • 42
1 2 3
…
18 19