Align columns in a vpgrid?

[newbiemate]

I want to display a row of information, but because each column in my rows have a different width, it messes up the alignment when I stack my rows together.

Here is an example:

Code: Select all

    vpgrid:
        ypos 150
        xalign 0.5
        xsize 1000
        cols 1
        spacing 3
        draggable True
        mousewheel True
        scrollbars "vertical"
        side_xalign 1.0

        hbox:
            xysize (800, 50)
            text "hello"
            text "i am a test"
            text "of alignments"
            textbutton "!!" action NullAction()        
            
        hbox:
            xysize (800, 50)
            text "one"
            text "i am a test"
            text "of alignments"
            textbutton "!!" action NullAction()        

        hbox:
            xysize (800, 50)
            text "longer column"
            text "i am a test"
            text "of alignments"
            textbutton "!!" action NullAction()   

The result looks like:

Code: Select all

hello     i am a test     of alignments     !!
one     i am a test     of alignments     !!
longer column     i am a test     of alignments     !!

How can I make sure the columns are all aligned cleanly within my vpgrid?

[gas]

Each cell of the hboxes have a variable xsize if you don't specify it.
You should use a style prefix and determine a fixed xsize for text and textbuttons.

[trooper6]

One thing, you are doing a grid...but you have only one column in your grid. So I'd say add columns. Also note that the size of each cell will be the size of the first cell, so you'll want to set the text_width in the first cell to be as wide as you want all the cells to be. Check this out:

Code: Select all

screen testgrid():
    vpgrid:
        ypos 150
        xalign 0.5
        cols 4
        yspacing 10
        draggable True
        mousewheel True
        scrollbars "vertical"

        # Since we have scrollbars, we have to position the side, rather
        # than the vpgrid proper.
        side_xalign 0.5

        text "hello" min_width 200
        text "i am a test"
        text "of alignments"
        textbutton "!!" action NullAction()

        text "one"
        text "i am a test"
        text "of alignments"
        textbutton "!!" action NullAction()

        text "longer column"
        text "i am a test"
        text "of alignments"
        textbutton "!!" action NullAction()



label start:
    #scene bg_bedroom
    show screen testgrid()

    "Adjust your min_width as you see fit."

[newbiemate]

@trooper6 What is the width property of an "add <image>", if the first column is to be a picture instead of text?

[trooper6]

The only thing you have to make sure is that the first cell is the size you want all the other cells to be, then you don't need to do anything. So just make sure the picture is the size you want all the cells to be then you don't have to do anything more.