Resizable div container attached to bottom in html.

Question

I want to create a div that is sticky to the bottom and can appear when clicking the button that has height depending on the amount of text on the textarea.

For example:
Same like on sololearn non-html playground.
When you type code on the editor and press "run", a window appears on the bottom that can be pulled up to resize and dismissed by pulling down.
I wanted to make similar to that one.

See my code and help me..
https://code.sololearn.com/WaTMzYI0f9iy/?ref=app

Answer 1

#shown{
display:none;
position: fixed;
bottom: 0;
width:100%;
background:teal;
color:white;
bottom:0;
}

Answer 2

Bibek Oli to make work out the left , top, right, bottom
You need to include
'Position'
Such as position: absolute
Position: relative
Position:fixed

Answer 3

Maybe u have used placeholder for "some text"

Answer 4

For sticky you can use
Position:sticky;
With bottom and left property to set position.

For resizable content area use can use a div with contenteditable:true; and css property resize

Resize property allow you to resize the element horizontally,vertically or both.

Answer 5

Divya Mohan
Will I be able to resize it from phone or only PC?

Answer 6

You have to just drag the bottom right coner of element to resize it.
I have android and it's working well here.you can check in my code.
I don't know wheather it works perfectly or not on desktop.u can try it there

Answer 7

Check this code

https://code.sololearn.com/Wlu9W6ovfajV/?ref=app