mozilla
Your Search Results

    Grids

    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>
    

    Image:grids3.jpg

    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

    This is actually possible to do by nesting grids within boxes within grids. In the example above, there would be one big grid with two columns and one row. The first column with a flex=1 contains a vbox containing a grid composed of 3 rows, containing the A's. The second column with a flex=3 contains a vbox containing a grid composed of 3 rows. The top and bottom rows each contain a grid of three columns and one row for B, C, D; while the center row contains only the BCD button. It can be complicated to work out the logic of it, but it does appear to work and flex properly.  Actually, this would not fix the case mentioned by Nickolay, but it would if BCD was on the bottom.  --patrickjdempsey23 Feb 2012
    <grid>
       <columns>
          <column flex="2" />
          <column flex="3" />
       </columns>
    
       <rows>
          <row>
              <grid>
                  <columns>
                      <column flex="1" />
                      <column flex="1" />
                  </columns>
    
                  <rows>
                      <row>
                          <button label="A" />
                          <button label="B" />
                      </row>
                      <row>
                          <vbox>
                              <button label="A" />
                              <button label="A" />
                          </vbox>
                          <vbox flex="1">
                              <button label="BB" flex="1" />
                          </vbox>
                      </row>
                  </rows>
              </grid>
                                       
              <grid>
                  <columns>
                      <column flex="1" />
                      <column flex="1" />
                      <column flex="1" />
                  </columns>
                  
                  <rows>
                      <row>
                          <button label="C" />
                          <button label="D" />
                          <button label="E" />
                      </row>
                      
                      <hbox flex="3">
                          <button label="CDE" flex="3" />
                      </hbox>
                      
                      <row>
                          <button label="C" />
                          <button label="D" />
                          <button label="E" />
                      </row>
                  </rows>
              </grid>
          </row>
       </rows>
    </grid>
    
    
    

     

    This shows how it's possible to do something similar to the image above by using grids inside of grids.   If the A, B block is reduced to just A like in the image, then you don't even need a grid, a simple vbox will probably work fine.  I've also thrown in vertical span BB just for good measure.
    --patrickjdempsey24 Feb 2012

    Splitters in a grid


    Should say somewhere that it's possible to put splitters in a grid, but in the "content" block (Between each <column> if you start with <rows>).

    -- Grubshka

     

    Document Tags and Contributors

    Contributors to this page: Napolj2, patrickjdempsey, Nickolay, Grubshka
    Last updated by: patrickjdempsey,