Stack Overflow
Stack Overflow

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
16
votes
1 answer

How do I add gridstack.js to Ractive.js?

I am creating example application with Ractive.js and gridstack.js, but can't figure out how to add gridstack as a decorator. I think this is the proper way to add jQuery elements to ractive.js, please advise if it's not. After I created a…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
16
votes
2 answers

Dynamic add component using gridstack and angular2? Jquery $.parseHTML does not work

I have the following jsfiddle I want to be able to stick my custom component into a specific grid (e.g. "") Right now without Angular2, I just use: var el = $.parseHTML("
Rolando
  • 58,640
  • 98
  • 266
  • 407
12
votes
4 answers

Wrap gridstack.js into Angular 2 component

I have some Angular 1 experience, but we have a need to use gridstack.js in an Angular 2 project. We are familiar with the gridstack-angular project, but that project is in Angular 1. I think the biggest thing I am having trouble with is the…
ArkieCoder
  • 493
  • 4
  • 11
5
votes
3 answers

Gridstack: Dragging widget from one grid into another, nested one

I am trying to create this behavior and not sure whether Gridstack supports it or not. I have 3 Gridstack grids: Grid1, Grid2, and Grid3. Grid1 is a standalone grid and Grid3 is nested inside Grid2. I need to be able to drag widgets from Grid1…
Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
5
votes
0 answers

Unable to add widget every after "dragstop" event [gridstack plugin + jqueryui]

Setup: [gridstack] I'm using "0.4.0" merged to "1.0.0-dev" from the develop branch. I have a column for the plugin/widget that I will drag onto the grid, so basically I use the jQueryUI for droppable and draggable. Just discovered an issue while…
heero
  • 278
  • 4
  • 15
5
votes
0 answers

Why is gridstack.js swapping my elements around when vue.js removes a node

I am trying to setup gridstack.js to work with my vue components as it does in this knockout example: https://github.com/troolee/gridstack.js#use-with-knockoutjs/. Here is a codepen of what I have: https://codepen.io/nyoung697/pen/BperoZ Add 3…
Nick Young
  • 885
  • 1
  • 10
  • 21
4
votes
1 answer

Google Map Overflows to Outer Div

I am trying to add a map widget to a dashboard I make using gridstack.js. A sample widget looks like this: I want to add the map to the inner (white color) div but when I do it the map displays covering the entire widget div, hiding the grey color…
Ruwangi
  • 243
  • 1
  • 4
  • 16
4
votes
2 answers

Gridstack - Add new widgets with content

So, I have been playing with Gridstack and was wondering if there was a guide on how to add content to a newly added widget. I have tested the example that adds a widget on button click. [Knockout.js demo][1] [1]:…
stonk
  • 305
  • 2
  • 3
  • 15
4
votes
3 answers

gridstack basics, how to make the demo work

Really noob question, but I don't understand what am I doing wrong here ?
François Richard
  • 6,817
  • 10
  • 43
  • 78
3
votes
1 answer

How to decrease minimal height and weight of a GridStack grid element?

I'm using GridStack.js library and I have to implement keyboard using it. The problem is that if I make screen width (in Chrome DevTools) less than 800-1000px then all the grid elements change their width to 100% (though they weren't this before).…
hot_penguin
  • 159
  • 8
3
votes
2 answers

How to use gridstack.js with Angular6 Project

I am working on a Angular6 Project and I need to use gridstack.js, how should I use it in this version of project I have checked libraries like gridster but they don't support nesting functionality. I need the same functionality as being provided by…
vishal
  • 137
  • 1
  • 7
3
votes
1 answer

How to operate on element using jQuery whilst it is display:none

Scenario I have a dashboard with some widgets grouped into tabs that the user can click through. The widgets have a default start height, and when the content (charts, graphs, tables etc.) they contain renders their heights get updated. I currently…
dom_ahdigital
  • 1,651
  • 18
  • 37
3
votes
1 answer

gridstack.js - keep aspect ratio

I'm using gridstack.js and need to maintain aspect ratio on-resize. I've tried many ways I found on google but nothing is working. Following is a link to JSFiddle I made to demonstrate the issue: jsFiddle var options = { aspectRatio: 16/9 …
Shay
  • 407
  • 2
  • 8
  • 15
3
votes
1 answer

Does a typings file without any declared modules make sense?

I'm trying to figure out how to use typings files in my Angular project. But all guides or SO posts seems to tell just to import the declared module in the typings file. In my case (gridstack.js) it has no declared modules, only interfaces and one…
Beese
  • 495
  • 2
  • 5
  • 19
3
votes
2 answers

Prerender vue.js 2.0 component (similar to this.$compile in vue 1)

I'm trying to make reusable components for gridstack. I cannot find a simple way to do something similar to this.$compile method from vue 1. I've seen this example. Here is my vue script: export default { components: { 'horizontal-fab':…
Olenka
  • 259
  • 3
  • 12
1
2 3
…
9 10