I'm working on an XHTML dialog (well, XHTML/XUL really). In my dialog, I have:

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="resize: both"> <vbox style="resize: both"> <!-- label and spacer --> <tree> <!-- tree contents --> </tree> <!-- some kind of statusbar --> </vbox> <vbox> <!-- a label and some buttons --> </vbox> </hbox> </dialog>

My focus in this question is on the tree element. I want it to have certain initial dimensions - a width and a height - due to which the containing dialog will have certain dimensions; but - I also want it to shrink and grow as I resize my dialog window, horizontally and vertically.

Focusing on the vertical aspect for a moment, I notice the following effects of choices of styles:

style="min-height: 500px; flex: auto"
gives me the initial dimension I want, and growth, but no shrinking below 500. Adding resize: vertical doesn't help. style="flex: auto"
gives me growth and shrinkage, but - without the initial height I want. style="height: 500px; flex: auto"
behaves exactly like with min-height above: gives me the initial dimension I want, and growth, but no shrinking below 500. Adding resize: vertical doesn't help.

So, not only do I not know which combination of CSS properties to set to which values, but I'm also confused by the effects, and the lack of effects, of different properties. I am also not sure how the styling of the containing elements affects things.

Notes:

You can see the actual dialog's source here. If there are other important properties which have bearing on this problem, please mention them. Since it's actually XHTML/XUL, there are a bunch of stylesheets I include with impact on the tree. I don't think they should impact these "external" aspects of it, but I might also be wrong.

einpoklum's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.