Open nickycdk opened 7 years ago
This would be great. I could use this as layout drawing tool.
I second this. This would be really helpful. Does anyone have a smart "workaround" for the time being?
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
@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
@rDr4g0n I ended up with ResizeSensor
from this library
@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.
@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
@SergeyKhval Sorry the example doesn't show anything, could you pls add another example for the dynamic height change, thanks a lot.
Here's an updated working version: https://codepen.io/gusy/pen/jQVrGz
@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:
@yokiharo how about importing the package from npm? https://www.npmjs.com/package/css-element-queries
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.
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