0

How to make that hovering the mouse over the boundary between two elements (here on the vertical line which separates the blue and red) makes it possible to resize the width of each element?

I'm looking for the behaviour of https://stackedit.io/editor

Is this possible directly with <textarea> resizing possibilities ?

* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%;  position: absolute; top:0; right:0; height: 100%;}
<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Basj
  • 41,386
  • 99
  • 383
  • 673
  • Answered here [http://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable](http://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable) – Lockless Nov 21 '16 at 18:35
  • Maybe not have position absolute. Position:absolute; **MEANS** that the position is **absolute** and cannot and will not be moved no matter what. Their position is locked to the coordinates – Zoe Nov 21 '16 at 18:36
  • @Call_Back_Function isn't it possible easily without jQuery? – Basj Nov 21 '16 at 18:36

1 Answers1

0

Sort of like this:

* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}
<textarea>hello</textarea>
<div>yo</div>

Note that the textarea:active style is necessary because of an issue with chrome that won't allow an element to be resized less than it's initial width. It's a bad hack to work around it until chrome fixes it.

Robert McKee
  • 21,305
  • 1
  • 43
  • 57
  • Nice @RobertMcKee, but how to be able to resize when hovering *anywhere* on the vertical line? Currently it only works when hovering the bottom of the page... – Basj Nov 21 '16 at 18:52
  • Well for that you'd need something a bit more complicated, likely needing some javascript and another element to serve as the divider. – Robert McKee Nov 21 '16 at 18:54
  • In the original question, I had a divider #separator, do you think it could be possible to reuse that, and to have this behaviour, without javascript? – Basj Nov 21 '16 at 18:55
  • Interesting that your original question has a divider, because I copied your question to form mine, and it didn't have it. I however can not think of a way to reuse it without using javascript off the top of my head. – Robert McKee Nov 21 '16 at 18:58