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

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -