Talk:XUL Tutorial:Grids

From MDC

[edit] Column Spanning

There is no means of making a cell span a particular number of multiple columns or rows.

Napolj2: Well, there is an indirect way of doing this, kind of like what was done in XUL_Tutorial:Grids#Example_2. If you want one cell to span multiple columns, put an hbox in every other row to enclose the cells belonging to those columns. This effectively collapses these columns into one new column. Then set the flex attributes on the column's so that the new column has the width of all the columns it replaced combined. In the example below, the last 3 columns are converted into one new column that is 3 times as wide as a normal grid column.

<grid>
   <columns>
      <column flex="1" />
      <column flex="3" />
   </columns>

   <rows>
      <row>
          <button label="A" />
          <hbox>
              <button label="B" flex="1" />
              <button label="C" flex="1" />
              <button label="D" flex="1" />
          </hbox>
      </row>
      <row>
          <button label="A" />
          <button label="BCD" />
      </row>
      <row>
          <button label="A" />
          <hbox>
              <button label="B" flex="1" />
              <button label="C" flex="1" />
              <button label="D" flex="1" />
          </hbox>
      </row>
   </rows>
</grid>

Of course, you can also make one cell span multiple rows by using vbox's to collapse multiple rows into one new row, and then setting the flex attributes of the row's appropriately.

That's not a real solution - the <hbox> "cells" do not use grid layout. Try putting a long label on the first "B" button to see what I'm talking about. --Nickolay 04:28, 25 January 2006 (PST)

I know what you mean; the 'solution' I proposed is really only a visual-only hack (e.g. the whole DOM structure will be different). So, should I just remove what I wrote above, or reword it to make this distinction clearer?

--Napolj2