2

I have the following div:

<div style='overflow:hidden;resize:both;border:1px solid orange;'>
   <div style='background-color:#aaa;width:400px;height:300px;'>
   </div>
</div>

and you can see it here: http://jsfiddle.net/4w7zd/

if you run it in firefox you can resize the main div. (make it bigger or smaller) however if you run it in chrome you can only resize so to make it bigger (wider and taller)

Can somebody tell me how to work-around it so that I can make the main div as small as I wish (like with firefox) ?

Many thanks

Zo72
  • 14,593
  • 17
  • 71
  • 103
  • it may not be the resize property causing this. http://caniuse.com/#search=resize – TMB Jan 23 '13 at 21:13
  • @TMB fair enough... question then... is there a workaround ? I tried to put min-width:0 or min-height:0 but it does not seem to do the trick – Zo72 Jan 23 '13 at 21:15
  • i had some success moving the width and height properties to the parent div http://jsfiddle.net/4w7zd/6/ – TMB Jan 23 '13 at 21:30
  • your still only going to be able to make it wider and taller in chrome. but you can set a lower minimum for with width and height. perhaps there is a way to set a normal default. I'll play with it some more. – TMB Jan 23 '13 at 21:32
  • See [How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?](http://stackoverflow.com/q/18178301/1529630) and [Custom CSS to allow chrome textarea resize smaller than initial state?](http://stackoverflow.com/q/15146449/1529630). – Oriol Jan 22 '16 at 23:49

3 Answers3

1

I did some testing and it seems the content makes it impossible to resize down in chrome. I've updated your case to this

<div style='overflow:auto;resize:both;border:1px solid orange; min-height: 10px;'>
    <div style='background-color:#eee;width:400px;max-height:300px; height:100%;'>
    </div>
</div>

And it seems to work now: http://jsfiddle.net/4w7zd/7/

Not sure if this is an option for you, but it might point you in the right direction.

Frank Shearar
  • 17,012
  • 8
  • 67
  • 94
Pevara
  • 14,242
  • 1
  • 34
  • 47
  • 1
    Still not possible to resize horizontally. – Pavlo Jan 23 '13 at 21:24
  • @PeterVR As Pavlo says: Can't resize horizontally. Also the height is 10px which is incorrect – Zo72 Jan 23 '13 at 21:27
  • I must agree. I have been playing with it some more and can't seem to get it to work as it should. I think you will have to resort to javascript as @P1nGu1n suggested. Would probably be better anyway as cross browser support seems to be very pour still. – Pevara Jan 23 '13 at 21:35
1

In chrome the minimum width when using resize is based on the content of it. This way works for me in Google Chrome: http://jqueryui.com/resizable/

Embed jquery libraries:

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Javascript:

<script>
  $(function() {
    $( ".resizable" ).resizable();
  });
</script>

HTML:

<div class="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>
P1nGu1n
  • 594
  • 8
  • 23
  • 1
    thanks but... I certainly can't add jquery and jquery ui just for this... a bit too much ... – Zo72 Jan 23 '13 at 21:39
  • jQuery does have a similar issue as the author check under 'constrain resize area' – TMB Jan 23 '13 at 21:44
1

Here is a workaround:

div {resize: both;}
div:active {
  width: 0;
  height: 0;
}

It works on Chrome, Safari, and Firefox. It probably doesn't work on IE, but I haven't checked. The problem with this workaround, however, is that you cannot interact with the elements in the resizeable div.

http://jsfiddle.net/Lf5qmos4/