Questions tagged [gridstack]

Questions related to gridstack.js which is a jQuery plugin for widget layout

About

gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts. It also works with knockout.js and touch devices.

Useful links


Related tags

140 questions
0
votes
1 answer

RGraph + gridstack resize to div

I am developing an application with gridstack and I want to put several graphics (lines and gauge) in different containers using the RGraph library. I can not make the graph fill the width and height of the container. Also when I change the size I…
PabloB
  • 19
  • 7
0
votes
0 answers

Displaying text content on gridster widget from JSON

I have some gridster widgets.I want display on them the text content which will come from json(backend database,for simplicitiy I will be hardcoding it now). The default function can generate the grids from a json variable.But I also want to display…
NewBie
  • 3,124
  • 2
  • 11
  • 19
0
votes
1 answer

Angular2 and Gridstack.js issue: $(...).gridstack is not a function

I am using Angular2 (2.3.1) and gridstack.js (gridstack.js 0.3.0) with jquery 1.11.1. Tried following this example https://stackoverflow.com/questions/39901473/wrap-gridstack-js-into-angular-2-component to get gridstack.js to work with Angular 2…
helloworld
  • 31
  • 4
0
votes
1 answer

Can't drag and resize with angular gridstack

I am experimenting with the angular gridstack framework. I am trying to get the demo code to work. This is the link to the framework: https://github.com/kdietrich/gridstack-angular This is my angular file:…
Fearcoder
  • 753
  • 3
  • 15
  • 47
0
votes
0 answers

Gridstack JS Nested Grid clickable icon

Is there any option/s needed so the icons inside nested grid will be clickable? I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
0
votes
1 answer

Dynamic grid layout with variable-sized elements in Javascript

I know that this may be a frequent question but I didn't have any luck finding an answer. I need to build a 3 column responsive layout for a grid containing an unknown number of variable-sized elements. Their size are limited to a maximum of 3x3 in…
StepTNT
  • 3,867
  • 7
  • 41
  • 82
0
votes
1 answer

Typings confusion?

I'm trying to implement a third-party .js lib (gridstack.js) into my Angular project. But I'm getting confused about how the typings files (.d.ts) are used/imported. So my approach so far has been to install gridstack through npm as well as the…
Beese
  • 495
  • 2
  • 5
  • 19
0
votes
1 answer

Gridstack widgets can't be moved after new widgets are added

Application made with RactiveJS, Redux and Gridstack. When new widgets are added, all is fine and widgets are movable/resizable as well. But when I delete all widgets and add, for example, two new, then: widgets can't be moved and can't be…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
0
votes
2 answers

GridStack- Setting the static grids

I am trying to make the grids static. No movement at all. I tried: var options = { staticGrid: true, }; $('.grid-stack').gridstack(options); and also this var options = { setStatic: true, }; …
Kamran
  • 4,010
  • 14
  • 60
  • 112
0
votes
1 answer

Laravel 5.4 and Gridstack.js

How do I add a third party js file to specific blade views? Basically I want to add gridstack functionality in a dashboard page inside my new project. I already tried downloading the js and css files from gridstack, I then placed the gridstack.js…
user1137313
  • 2,390
  • 9
  • 44
  • 91
0
votes
2 answers

Fixed table header inside a scrollable div

First of all, there are indeed multiple similar questions but they are not working in my case. Related, Other related The structure is like page > div > div > stuff + table I am using Gridstack.js and here is my current…
Weedoze
  • 13,683
  • 1
  • 33
  • 63
0
votes
0 answers

GridStack overlapping issue

I'm having an issue with .addWidget() when autoposition is set to true. basically when adding a new widget, it is always is positioned at 0 (x), 0 (y), 4 (width), 4 (height) so overlapping the first widget. before adding new widget after adding the…
Tom
  • 97
  • 11
0
votes
1 answer

How to create a textbox inside gridstack so that it fits the entire grid-item-content?

I am using the following: https://troolee.github.io/gridstack.js/ For each grid-stack-item, I have a grid-stack-item-content div. Within each, I have 2 divs with class .panel-header that has the title of the box/panel and a textarea under that. The…
Rolando
  • 58,640
  • 98
  • 266
  • 407
0
votes
1 answer

GridStackJs attributes not working in Ember.js

I am applying data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3" attributes of GridStackJS in html page of my Ember.Js project but it is not working.
0
votes
1 answer

GridStack JS set order of grid boxes

I am trying to store the order of the boxes as they appear on the page using gridstack.js Currently they order as they appear in HTML, and not how they are laid out on the page. Here is a picture to explain further what I am trying to do: The code…
Ben
  • 5,627
  • 9
  • 35
  • 49