Resizable div container attached to bottom in html. | SoloLearn: Learn to code for FREE!

+10

Resizable div container attached to bottom in html.

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

9/29/2020 7:51:59 AM

Bibek Oli

7 Answers

New Answer

+5

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

+6

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

+2

Maybe u have used placeholder for "some text"

+2

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.

+2

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

+1

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

+1

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