Question

I’m working on creating an XUL app right now and I’m stuck with a few problems at this point. My current file is here: http://projects.thecloudonline.net/gemxul/regrid.xul.

I want that second column to essentially “float: right” (like how CSS works on webpages). The red background shows me that part moved, but my content is stuck oriented left. How can I make the content go along with it?

Secondly, my overall goal is to get it so that the layout is essentially split in half. Setting maxwidth=”50%” on the first column doesn’t seem to do anything. Is that the correct approach, or am I way off there?

That’s all for now!

Answer 1

This should work :

<grid style="border: #000000 solid 1px;">
    <columns>
        <column style="border-right: #666666 solid 1px;"/>
        <column flex="1"/>
        <column style="background-color:red;"/>
    </columns>
    <rows>
        <row>
            <vbox>
                <label value="Launcher 1" id="l1_title"/>
                <button label="button" id="l1_btn" />
                <label value="This is a description for item 1." id="l1_desc"/>
            </vbox>
            <spacer/>
            <vbox>
                <label value="Launcher 2" id="l2_title"/>
                <button label="button" id="l2_btn"/>
                <label value="This is a description for item 2." id="l2_desc"/>
            </vbox>
        </row>
        <row style="border-top: #666666 solid 1px;">
            <vbox>
                <label value="Launcher 3" id="l3_title"/>
                <button label="button" id="l3_btn"/>
                <label value="This is a description for item 3." id="l3_desc"/>
            </vbox>
            <spacer/>
            <vbox>
                <label value="Launcher 4" id="l4_title"/>
                <button label="button" id="l4_btn"/>
                <label value="This is a description for item 4." id="l4_desc"/>
            </vbox>
        </row>
    </rows>
</grid>

There are several ways of doing this. Personally I wouldn’t use grid for something like this. vbox and hbox in combination beats anything you would normally do in tables. But of course it depends entirely what your end goal is.