How to force a div to expand or resize only in one direction in CSS/jQuery

Question

I am working on a <div> which is resizable horizontally and text within will be trimmed based on its container width.

 .resizable_div { border: 1px solid red; white-space: nowrap; width: 100px; height: 50px; line-height: 50px; overflow: hidden; text-overflow: ellipsis; margin: 50px auto; padding: 5px; resize: horizontal; cursor: col-resize; min-width: 50px; max-width: 150px; }

 <div class="resizable_div">This is an example</div>

You can see that the div box is resizable horizontally and the text is shortened using text-overflow etc. But the problem is that when you resize this div using resize handle on right hand side, it increases or decreases in opposite direction as well ie left hand side. I don't want this behaviour. Instead I want the div should resize by going only in right hand direction and left hand side just stays there. How it can be achieved?

UPDATE

There is one more issue. The div is resizable only by bottom right corner and not with col-resize handle anywhere on right border. How to fix it?

Answer 1

try this, just need add another div and mother div contain margin: 50px auto;

 .mother { padding: 20px; resize: both; width: 300px; margin: 50px auto; position: relative; } .child{ border: 2px solid; padding: 20px; resize: both; overflow: hidden; position: absolute; left: 0; }

 <div class="mother"> <div class="child"> <p>Let the user resize both the height and the width of this div element.</p> <p>To resize: Click and drag the bottom right corner of this div element.</p> </div> </div>

Answer 2

Please remove the Auto from the margin, and to make it expand only in the right side make the direction as ltr.

Therefore, your CSS will look like so :

 .resizable_div { border: 1px solid red; white-space: nowrap; width: 100px; height: 50px; line-height: 50px; overflow: hidden; text-overflow: ellipsis; margin: 50px; padding: 5px; resize: horizontal; cursor: col-resize; min-width: 50px; max-width: 150px; direction: ltr; }

 <div class="resizable_div">This is an example</div>

Answer 3

this is because of margin:50px auto; this css property. your left and right margin is auto so it will make center your div to it's parent (for here parent is body). so while you resize your div it increase you div width and set left and right margin values equally because of it's auto value.

if you remove this property your div resize is works perfectly as you required but your box comes to the left side of you body not in center.

see the following snippet.

 .resizable_div { border:1px solid red; white-space:nowrap; width:100px; height:50px; line-height:50px; overflow:hidden; text-overflow:ellipsis; /*margin:50px auto;*/ padding:5px; resize:horizontal; cursor:col-resize; min-width:50px; max-width:150px; }

 <div class="resizable_div">This is an example</div>

I just add comment for your margin css property to the div

I hope this will clear your confusion regarding this problem.

Thank you...

Answer 4

I made the css property overflow to auto , so it is working fine. For the 2nd issue: Using resize property the div will always be resizable only by bottom right corner(horizontal/vertical/both) and it can't be resizable anywhere on right border.

 .resizable_div { border: 1px solid red; white-space: nowrap; width: 100px; height: 50px; line-height: 50px; **overflow: auto;** text-overflow: ellipsis; margin: 50px auto; padding: 5px; resize: horizontal; cursor: col-resize; min-width: 50px; max-width: 150px; }

 <div class="resizable_div">This is an example</div>

Answer 5

Type resize: both; not resize:horisontal.