jquery ui resizable prevent height smaller than text

Question

I have resizable DIV with text. I operate only on width, the height should auto size but not smaller than text (content). How to do it?

My code:

HTML:

<div id="block">
  sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
  asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
  klasdjf lka;sjfajf ljasfljaflkj f jf  f jfaj flajklfjalfj
  klasjf  f lkajfajf lajf lajf al alfjasl jall fafasff
</div>

CSS:

#block {border: 1px solid red; width: 300px; height: auto; padding: 5px}

JS:

$("#block").resizable({
    maxWidth: 500,
    minWidth: 115
});

Here the DEMO

It's not easy to make the min-height the same as the text, because when you resize the width the min-height will change. It's better if you work with overflow or something similar — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Mar 23, 2016 at 14:30

Poul Kruijt · Accepted Answer · 2016-03-23 14:43:05Z

4

A solution could be to use a containment container like this. This will keep that container of yours in control :)

EDIT: ohno.. it doesn't work when you make it smaller.. let me see

EDIT2: now it does!

jsFiddle

HTML

<div id="block">
  <div class="content">
    sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
    asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
    klasdjf lka;sjfajf ljasfljaflkj f jf  f jfaj flajklfjalfj
    klasjf  f lkajfajf lajf lajf al alfjasl jall fafasff
  </div>
</div>

JS

var block = $("#block");

block.resizable({
    maxWidth: 500,
    minWidth: 115,
    resize : function(e) {
      block.height(block.find('.content').height())
    }        
});

CSS

#block {
    border: 1px solid red; 
    width: 300px; 
    height: auto; 
    padding: 5px
}

edited Mar 23, 2016 at 14:43

answered Mar 23, 2016 at 14:33

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Poul Kruijt Over a year ago

@MarcosPérezGude exactly, if you change the width of the container, without making the height smaller, you will see it does what he wants ..

Marcos Pérez Gude Over a year ago

I think it's the opposite because in your example you can't have more height than the initial, but OP needs that the height will never be less than the containment. Maybe I misunderstood the question, I try to read it better.

Poul Kruijt Over a year ago

@MarcosPérezGude I've updated my fiddle now.. if you compare the functionality on my fiddle, to his, i expect this is what he wants.. but perhaps we will never know :D

Marcos Pérez Gude Over a year ago

Better now, but if I understand fine the question this is not exactly. You are controlling the width and the normal flow will make the rest (the height), but you can't control de height with that script. You can't make the box larger than the text is. But maybe it's the behaviour that OP needs. My upvote to you while we wait for OP's appear.

soonic Over a year ago

Thank you very much and sorry If I didn't make myself more clear in the post, but this is what I expected in the answer. It also inspired me to extend a little the code for my later needs like DEMO.

|

Collectives™ on Stack Overflow

jquery ui resizable prevent height smaller than text

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related