Search jQuery

jQuery Forum

Wrong height of parent container when using position utility

in Using jQuery UI • 8 months ago

hilbert00 reports:

I have found this strange behaviour when using ui.position. I have a widget designed in a column wise manner and I was thinking to use the position utility to position the left and right cols and their position.
The problem is that after the positioning of the right col to the right, the height of the container box is much heigher than needed as it would contain the left and right divs one after the other.
This is the link to the jsFiddle test case: http://jsfiddle.net/hilbert00/sAbxS/

Replies(2)

rdworth

Re: Wrong height of parent container when using position utility

8 months ago

This does not demonstrate a bug in the position utility, only that when you ask the position utility to do something for you, you sometimes need to deal with the consequences. As useful as the utility is, it does not in all instances absolve you from learning css and how it works. Neither is it always the best solution, sometimes css alone is.

To your example:

http://jsfiddle.net/hilbert00/sAbxS/

The same thing happens if you don't use the position utility (or any JavaScript at all for that matter) and just position the elements with css:

http://jsfiddle.net/JKrfa/

That's how position: relative works in css. The height of the parent element stays the same as if the child elements were in their original positions. You can imagine them as actually occupying their original positions and just displaying themselves nudged over a bit.

Back to using the position utility. You could use a position:relative parent and position:absolute children instead:

http://jsfiddle.net/5sTAT/

but that shrinks the parent way down to the height of the non-position:absolute child, in this case the header. So better would be to use floats:

http://jsfiddle.net/GaAW7/

At this point I can't see any reason to use the position utility for this layout. Look how far css alone gets you with floats:

http://jsfiddle.net/pARJE/

antonio.b..

Re: Wrong height of parent container when using position utility

8 months ago

Thanks a lot for your explanation. I was thinking that the jQuery position was somehow making positioning easier and more intuitive. But I'm lucky because for my very simple design I can profit from the power of float.

Thanks again,

Top Reply

Response title

Attachments

jQuery Forum

Wrong height of parent container when using position utility

Replies(2)

Re: Wrong height of parent container when using position utility

Re: Wrong height of parent container when using position utility

Statistics

Tags

Actions

Related Posts