Resize div

Patrick Mast · 2024-08-28T06:51:24.294+00:00

I have a div in my app that needs to be resizable horizontally, just like we can in Toddle's editor. How can I achieve this in my app?

Patrick Mast
1 year ago
I have a div in my app that needs to be resizable horizontally, just like we can in Toddle's editor. How can I achieve this in my app?
Max
1 year ago
You can do this with events. There is mousedown, mouseup and mousemove. With those you can create the logic to resize an element.
Max
1 year ago
I made a quick demo. You can resize dragging the red div 🙂

https://random_tests.toddle.site/resize
https://editor.nordcraft.com/projects/random_tests/branches/main/components/resize?canvas-width=800&canvas-height=800
Quick and Dirty
🙏1
Tom Ireland
1 year ago
Please don't delete this, @Max 😄 I could use this as a reference at some point.
@Tom Ireland
Please don't delete this, @Max 😄 I could use this as a reference at some point.
Max
1 year ago
No promises... Today I'm like "don't delete this, Tom might need it". Next week it might be "oh, what's that trash, I should delete it" 😅 But I am happy to recreate it if I delete it
🤞2
🤣3
Patrick Mast
1 year ago
Thank you @Max !! We need the ability to create folders for our projects, allowing us to organise our test projects within a dedicated "Test" folder!
https://discord.com/channels/972416966683926538/972416966683926541/1273913688570724434
@Patrick Mast
Thank you @Max !! We need the ability to create folders for our projects, allowing us to organise our test projects within a dedicated "Test" folder!
https://discord.com/channels/972416966683926538/972416966683926541/1273913688570724434
Max
1 year ago
No Problemo. I voted against the folders 😅
charmander1
@Max
I made a quick demo. You can resize dragging the red div 🙂

https://random_tests.toddle.site/resize
https://editor.nordcraft.com/projects/random_tests/branches/main/components/resize?canvas-width=800&canvas-height=800
Jacob Kofoed
1 year ago
This is a really nice example. Great to see style variables being used for best performance 💪
@Jacob Kofoed
This is a really nice example. Great to see style variables being used for best performance 💪
Max
1 year ago
Thanks! How else would you do that? 🤔
Patrick Mast
1 year ago
Hey @Max , I need your help with https://editor.nordcraft.com/projects/random_tests/branches/main/components/resize 🙏
Can you alter it (Or duplicate in a new project) so that the the resized div is centered? What I'm looking for is exact like as in attached movie. Thanks a million!!
@Patrick Mast
Hey @Max , I need your help with https://editor.nordcraft.com/projects/random_tests/branches/main/components/resize 🙏
Can you alter it (Or duplicate in a new project) so that the the resized div is centered? What I'm looking for is exact like as in attached movie. Thanks a million!!
Lucas G
1 year ago
Just center the parent div
Unless I'm not understanding what you mean
@Patrick Mast
Hey @Max , I need your help with https://editor.nordcraft.com/projects/random_tests/branches/main/components/resize 🙏
Can you alter it (Or duplicate in a new project) so that the the resized div is centered? What I'm looking for is exact like as in attached movie. Thanks a million!!
Max
1 year ago
I am also not sure I understand the challenge. In my mind, centering the div will do the trick, just as @Lucas G said
Patrick Mast
1 year ago
I tried, but the calculations are off when you center the main div.
@Patrick Mast
I tried, but the calculations are off when you center the main div.
Max
1 year ago
What do you mean by "off"?
Patrick Mast
1 year ago
Hey @Max, the mouse cursor on drag is perfect when the div is aligned LEFT, but "off" when it's centered.
Max
1 year ago
Ah, Ok. You need to double the additionalWidth. You need to add the additional width on both sides @Patrick Mast

Resize div

Patrick Mast

Max

Max

Tom Ireland

Max

Patrick Mast

Max

Jacob Kofoed

Max

Patrick Mast

Lucas G

Max

Patrick Mast

Max

Patrick Mast

Max