CODEWITHSUNDEEP
jqueryjquery-ui
Carlos Bribiescas
Carlos Bribiescas

Reputation: 4427

JQuery UI Resize Handle not correct

I've created this fiddle that shows an issue i'm having http://jsfiddle.net/8FBW5/1/

You can see that the little handle to re-size isn't wrapped around the contents of the div. I could manually set the size, but that will be cumbersome as i'll be adding/removing elements.

Doing something like 

#field{
    height: 34px;
}

isn't what i want to do to get the handle in the correct position. Is there a setting that will make it so that the handle appears at the appropriate place?

Upvotes: 2

Views: 397

Answers (1)

frnhr
frnhr

Reputation: 12903

The catch is that all of the elements inside the #field div are floated. This makes it have height of 0. See All About Floats article, mainly chapter "The Great Collapse" for an explanation why is this seemingly wrong behavior actually necessary. The site is a good source for CSS stuff altogether.

One way to solve this is a so-called "clearfix". And one way of achieving that is with an :after pseudo-element:

#field:after {
    display: table;
    clear: both;
    content: "";
}

The fiddle: http://jsfiddle.net/UyDC4/2/

For a quick reference (and the evolution of browser support), see http://css-tricks.com/snippets/css/clear-fix/

Another way to make the container stretch to the expected height is to add a new element just before closing it: <div style"clear: both;"></div>. This is in principle the same technique as with the pseudo element, but is better supported in ancient browsers (sorry IE<8 but nowadays you're ancient). On the downside, there is this non-semantic new HTML element that many people would consider ugly.

Yet another way is to set overflow: hidden; on the parent element. I find this method is the most poorly documented on the Net, and that's probably for a good reason. While it will work just fine for making the container element stretch vertically, it will also (obviously enough) change its overflow behavior. In many situations this might be undesirable. Here is a discussion of that technique: http://www.quirksmode.org/css/clearing.html

Upvotes: 2

Related Questions