Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make <div> resizeable?

Is there a way to make a <div> container resizeable with drag & drop?

like image 395
Chris Avatar asked Dec 24 '08 13:12

Chris


People also ask

How do I make a div auto adjust width?

Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.


2 Answers

The best method would be to use CSS3. It supported by at least Webkit and Gecko.

According to the w3c spec:

div.my_class {     resize:both;     overflow:auto; /* something other than visible */ } 

Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.

like image 75
Georg Schölly Avatar answered Sep 17 '22 18:09

Georg Schölly


div {   border: 1px solid black; }  .resizable-content {   min-height: 30px;   min-width: 30px;   resize: both;   overflow: auto;   max-height: fit-content;   max-width: fit-content; }
<div class="resizable-content">Resize Me!</div>
like image 23
sushmitha shenoy Avatar answered Sep 17 '22 18:09

sushmitha shenoy