Vue-grid-layout: Dynamic height?

[nickycdk]

Does it support dynamic height in the tiles? Imagine a tile where you fetch content from an API and want to display the data in a tile - Then the tile should automatically resize to the height of the content you are displaying... Very much like the issue here in React Grid: https://github.com/STRML/react-grid-layout/issues/2

[stuta]

This would be great. I could use this as layout drawing tool.

[kvasimon]

I second this. This would be really helpful. Does anyone have a smart "workaround" for the time being?

[SergeyKhval]

I managed to achieve this using mutationObserver. You can observe the changes on the children of GridItem, then manually calculate new height of the GridItem using this method and finally trigger resizeEvent with new height

[rDr4g0n]

@SergeyKhval I found a simple vue component to abstract away the mutation observer so that one can simply respond to a resize event: https://github.com/Akryum/vue-resize

[SergeyKhval]

@rDr4g0n I ended up with ResizeSensor from this library

[ChadTaljaardt]

@SergeyKhval Can you show an example using JSFiddle? I think i need this but i want to see if its what i need before i open a new issue.

[SergeyKhval]

@ChadTaljaardt this is quick and dirty example. I am using ResizeSensor instead of MutationObserver here. With some trial and error you can achieve very smooth dynamic height

[JimmyLv]

@SergeyKhval Sorry the example doesn't show anything, could you pls add another example for the dynamic height change, thanks a lot.

[gmsa]

Here's an updated working version: https://codepen.io/gusy/pen/jQVrGz

[nunogois]

@gmsa Any tip on the best way to include the needed https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.js in an existing project? If I try to save the file locally and require it like so in my .vue component:
var resizesensor = require('../assets/js/resizesensor.js');
I get could not set ResizeSensor of undefined when the root.ResizeSensor = factory(); comes up in my local ResizeSensor.js.

I'm using Quasar Framework, if it makes any difference.

I'm probably just being dumb and/or rusty on Vue but I appreciate any help you can give me :slightly_smiling_face:

[gmsa]

@yokiharo how about importing the package from npm? https://www.npmjs.com/package/css-element-queries

[bddexter]

I was facing the same issue (basically all my widget content is being populated form API endpoints). To keep things simple (no other plugins needed) I just added a thin scrollbar to every widget so that content doesn't overlap the widget. After de user decides to resize the widget I post the new layout to my db so that the grid is saved.