Constraing minimum height and width of outer div to the size of inner div

Question

I have a div within a div.

The outer div is draggable(jQuery) and the inner div is resizable(jQuery).

The inner div has a span within it which is filled with text.

How can I make the outer div height and width never be any smaller than the height and width of its contents?

Currently I can resize the outer div to be smaller and this is a problem when the outer div has a border as the text overflows out of the outer div.

thanks for your help in advance

Answer 1

Try this, WithIn the resize event, 1) Get the width of the inner div. And, 2) Apply min-width of outer div as (innerdiv + 4) ..

so, whenever you resize, resize event will trigger, so, you need to get innerdiv width and set its outerdiv "min-width" slightly higher than innerdiv..

Hope this helps..

.bind('resize', function(){
      var outer_width = parseInt($('.innerdiv').width() + 4);
         $('.outerwidth').width(outer_width);
   });

Answer 2

给出永远不会变小的div的min-height和min-width。要确切的答案，您可以发布完整的html代码。

Answer 3

Apply some max-height and max-width to the inner div.

If your outer div has 300px height and 300px width:

inner div css

max-height:300px;
max-width:300px;

Answer 4

If you're actually using the jQuery UI Resizable plugin you can use its own option parameters :

$('.wrapper').resizable({
    minHeight: function() {
        $(this).contents().height();
    }
    ,minWidth: function() {
        $(this).contents().width();
    }
});

Answer 5

using a bit from each of your answers, this is how I solved it.

var spanminwidth=$('#span'+i).width();
spanminwidth=+spanminwidth+4;
$("#div"+i).css('min-width',spanminwidth);

var spanminheight=$('#span'+i).height();
spanminheight=+spanminheight+4;
$("#div"+i).css('min-height',spanminheight);

thanks for all the help