Forum Discussion

OS_Pizza's avatar
OS_Pizza
Contributor III
9 months ago

Grid Layout

In dashboard grid layout . What does the value in column width represents?

1. *

2. Difference between auto and * ?

3. How is the scale of the width measurement ? what is the total width of the screen?

4. What does 2* means ?

 

User Interface
  • RobbSalzmann's avatar
    RobbSalzmann
    9 months ago

    My experience with this is:

    1. *
    Tells the grid to make this row or column use the remaining space

    2. Difference between auto and * ?
    Auto sizes the row or column based on the component size within, * just makes the row use whats left  whether it fits the component or not.

    3. How is the scale of the width measurement ? what is the total width of the screen? 
    Measurement is in pixels.  

    4. What does 2* means ? 
    If you have two columns (or rows) where one is * and the other is 2*, the second 2* column will always be 2 times wider than the * column.

  • JackLacava's avatar
    JackLacava
    3 months ago

    You actually need 3 rows in that case, and to set their heights to *, *, and 2*. This way, the system will divide the screen in 4 sections, allocate 2 of them to the bottom row, and one each to the other rows.

    (You might have to place something in that row, like a transparent image or label, otherwise the system might not display the row in some cases). 

    EDIT: sorry, I might have misread what you want - i interpreted your text as "I want half the screen to go to the rows, and the other half to stay blank". If instead you meant "I want each row to have half the screen", just have 2 rows with their heights set to * and *. The system will split the available space in two sections and allocate one to each row.

  • RobbSalzmann's avatar
    RobbSalzmann
    Valued Contributor II
    9 months ago

    My experience with this is:

    1. *
    Tells the grid to make this row or column use the remaining space

    2. Difference between auto and * ?
    Auto sizes the row or column based on the component size within, * just makes the row use whats left  whether it fits the component or not.

    3. How is the scale of the width measurement ? what is the total width of the screen? 
    Measurement is in pixels.  

    4. What does 2* means ? 
    If you have two columns (or rows) where one is * and the other is 2*, the second 2* column will always be 2 times wider than the * column.

    • JackLacava's avatar
      JackLacava
      Honored Contributor
      9 months ago

      All correct, just some extra detail... Technically, * (star) is a flexible unit of measurement.

      Let's say I have 4 columns, defined as *, 3*, 2*, and 4*, and an available space that is 800 "pixels" wide. The system will sum up all stars (1+3+2+4 = 10); then divide the available space by that value (800 / 10 = 80), and assign to each column that amount multiplied by the number of stars it has (80 x 1, 80 x 3, 80 x 2, 80 x 4).

      The nice bit is that this calculation gets performed every time the dashboard is resized, making interfaces responsive while maintaining proportionality between them.

      These sizes, btw, come directly from Microsoft libraries. There is a page, somewhere in their docs, describing exactly what a "pixel" is.

  • Sweez's avatar
    Sweez
    New Contributor III
    3 months ago

    This is a great thread as these concepts have always been a little unclear to me.  Say you have a grid with 1 column and 2 rows and you want the two rows to take up half the screen not matter how large the contents are of each row.  Is there a way to do that?

    • JackLacava's avatar
      JackLacava
      Honored Contributor
      3 months ago

      You actually need 3 rows in that case, and to set their heights to *, *, and 2*. This way, the system will divide the screen in 4 sections, allocate 2 of them to the bottom row, and one each to the other rows.

      (You might have to place something in that row, like a transparent image or label, otherwise the system might not display the row in some cases). 

      EDIT: sorry, I might have misread what you want - i interpreted your text as "I want half the screen to go to the rows, and the other half to stay blank". If instead you meant "I want each row to have half the screen", just have 2 rows with their heights set to * and *. The system will split the available space in two sections and allocate one to each row.

  • RobbSalzmann's avatar
    RobbSalzmann
    Valued Contributor II
    3 months ago

    Unfortunately JackLacava only the 2-3 users who have participated on this thread will see your response because the post was created in March and this forum doesn't bump 'most recently replied to' posts to the top the way most forums do.