angular-gridster2 icon indicating copy to clipboard operation
angular-gridster2 copied to clipboard
verified publisher icon tiberiuzuld

Gridster resize contents as grid is resizing.

Open gitalvininfo opened this issue 4 years ago • 7 comments

Hi @tiberiuzuld !

Thanks for the effort you exerted to put up this great library. This library meet all my requirements.

I just want to ask if this is even possible in this library as shown in the gif below I created.

scrnli_6_19_2021_4-09-02 PM

As you can see, as I resize on the container, its content also resizes based on the height and width of the container. May I know if this is possible, if not can you point me for some alternative solutions or hints that will make this possible. I'm not actually a God in CSS 😋. I know this will deal with some css transforming.

What do you think?

Thanks again for this great library.

gitalvininfo avatar Jun 19 '21 08:06 gitalvininfo

Hi! is there someone that could point me out with this problem? I'm currently stuck on this stage finding the right solution. The gif above scaling is just a transform property of css.

Thanks

gitalvininfo avatar Jul 06 '21 09:07 gitalvininfo

Hi, I am searching a solution to this problem, too. I want to use this auto fit package (https://www.npmjs.com/package/angular-fittext) for resizing my text when resizing the gridster item, but unfortunately it does not work with gridster.

mst94 avatar Jul 13 '21 11:07 mst94

Hi @mst94!

Did you manage to solve this issue? Your provided package does not fit well my scenario and it only resizes texts.

Thank you.

gitalvininfo avatar Jul 16 '21 09:07 gitalvininfo

Hi @gitalvininfo,

until now, I could not found a solution. Currently I am experimenting with css transform: scale() in addition to javascript. Have a look at https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/, it may help you. As soon as I have found a solution, I will post it here.

mst94 avatar Jul 20 '21 11:07 mst94

Hi. for anyone who face this issue, when gridster-item is resizing, it uses the transform: translate3d of css. Now, when you want to resize as well as the contents of the gridster-item when it is resizing, we need to attach the transform: scale property of css in the callback function of resizable.stop.

Well that is my problem as of now, I need to grab the reference of that gridster-item.

gitalvininfo avatar Aug 16 '21 09:08 gitalvininfo

Hi, this npm package might resolve your issue https://www.npmjs.com/package/gridster-item-extend

rajratnamaitry avatar May 12 '22 19:05 rajratnamaitry

Thanks I will look into it later @rajratnamaitry . Glad you pointed some resources I might use.

gitalvininfo avatar May 13 '22 04:05 gitalvininfo