CODEWITHSUNDEEP
cssjquery-uilayout
Infeligo
Infeligo

Reputation: 11801

Vertically flexible box in resizable jQuery dialog with CSS

Is there is simple (enough) way to achieve the layout I want using CSS? 

       jQuery dialog:

== Heading ==================
|                           |
|        Comment list       |    <-- Flexible height
|                           |
-----------------------------
|     New comment input     |    <-- Fixed height
|================ [close] ==|

The layout is a jQuery dialog with two areas stacked vertically: comment list and new comment input. The dialog is resizable and when its height grows or shrinks, I want the comment list's height to change accordingly. New comment input area height stays fixed.

Basically, I want the comment list to be the height of the dialog minus the height of input area.

The proposed layout is (although you may change it):

<div id="dialog">
    <div id="commentsList">
    </div>
    <div id="newComment">
    </div>
</div>

So can I achieve this with CSS so it would work in IE8+ and other browsers? Or as I'm already using jQuery UI, then perhaps there is an elegenat JS solution?

Upvotes: 0

Views: 407

Answers (2)

Yoeri
Yoeri

Reputation: 1906

You could try this: jsFiddle sample

It works in chrome & IE9 (don't have IE8 right now). It uses anchoring by setting top, left, right and bottom for absolute positioned objects. You do need to alter the jquery UI style to include position fixed, otherswise the absolute positioning inside the dialog is screwed :-)

Comment if u need more help, hope I brought you another idea of solving this issue.

Upvotes: 1

chipcullen
chipcullen

Reputation: 6960

I do not know about jQuery dialogue, and what effects it would have, but:

If you were doing this with straight markup, make sure #dialog and #commentList don't have declared heights in the CSS. Then just give #newComment a specific height (e.g. 45px). Normal HTML flow will have the other two divs (#dialog and #commentList) grow as needed. That is to say, by default, their heights are set to "auto".

If jQuery dialogue is overriding this default (you can tell by using Firebug or a similar developer tool that shows computed style), you may need to re-declare 'height: auto;' on those selectors.

Upvotes: 0

Related Questions