JQuery UI Resize Handle not correct -
i've created fiddle shows issue i'm having http://jsfiddle.net/8fbw5/1/
you can see little handle re-size isn't wrapped around contents of div. manually set size, cumbersome i'll adding/removing elements.
doing
#field{ height: 34px; }
isn't want handle in correct position. there setting make handle appears @ appropriate place?
the catch of elements inside #field
div floated. makes have height of 0
. see all floats article, chapter "the great collapse" explanation why seemingly wrong behavior necessary. site source css stuff altogether.
one way solve so-called "clearfix". , 1 way of achieving :after
pseudo-element:
#field:after { display: table; clear: both; content: ""; }
the fiddle: http://jsfiddle.net/uydc4/2/
for quick reference (and evolution of browser support), see http://css-tricks.com/snippets/css/clear-fix/
another way make container stretch expected height add new element before closing it: <div style"clear: both;"></div>
. in principle same technique pseudo element, better supported in ancient browsers (sorry ie<8 nowadays you're ancient). on downside, there non-semantic new html element many people consider ugly.
yet way set overflow: hidden;
on parent element. find method poorly documented on net, , that's reason. while work fine making container element stretch vertically, (obviously enough) change overflow
behavior. in many situations might undesirable. here discussion of technique: http://www.quirksmode.org/css/clearing.html
Comments
Post a Comment