How to do a draggable expandlble div (React, Tailwind)

Question

I'm trying to get something similar to what is on this page
This is from the Tailwind CSS website,

I'm interested in the sidegraber thingy that can shrink the parent div.
So far i've been trying to use vanilla css 'resize' tag with:
resize: horizontal;
overflow: auto;
but it didn't work great

Any tips? thanks!

score 3 · Accepted Answer · edited Jul 23 '21 at 09:34

3

You can actually inspect the tailwind site to see its css, as it actually uses Tailwind :D

You can see that the parent div is relative and it contains 2 divs, one empty, and one with the content. When you move the grabby thingy, you set a margin ot the empty div, and translate the grabby thingy the same amount to the left. In the example, i have dragged the thingy 55px to the left, so it translated it 55px to the left, and added a margin to the empty div (55px again). You can calculate this pixel value by subtracting the current mouseX position from the Xposition when you first clicked and started dragging.

edited Jul 23 '21 at 09:34

Dharman

30,962
25
85
135

answered Jul 23 '21 at 09:28

Vasil Kostadinov

220
3
12

Thanks! Been looking at this chunk of html for a while, you helped a lot! – Guy G Jul 27 '21 at 11:48
do you have any sample link? – MSH May 03 '22 at 18:30

How to do a draggable expandlble div (React, Tailwind)

1 Answers1