Screen Language Vbox Children Alignment Problem

[Gamma Vector]

Trying to make a screen that involves a large frame, and within that several smaller frames, and within each of those a vbox with some stuff in it. All good, all fine, except I need the last item in the vbox to sit at the BOTTOM of the vbox no matter what all is above it, and for all the other items to sit as high in the vbox as they can.

This is apparently impossible. No matter what I do with anchor and pos and align, I get one of two things happening. If I set "yfill True" in the vbox everything spreads out an equal distance from each other, resulting in the stuff that should be clustering up top to be spread out all over the box. If I set "yfill False" that stops happening, and each element only takes up as much space as it needs. However, then the button that is supposed to be on the bottom of the frame winds up halfway up the frame, at the bottom of the vbox.

I tried inserting a fixed to maybe take up the extra space, setting ITS "yfill" property to True. This wound up shoving my button down to the very bottom of the SCREEN instead of the frame it's supposed to be in. Using a frame with an invisible background as my "spacer" did the exact same thing. Setting a yminimum and ymaximum didn't seem to do anything, really - the fixed/frame expanded to the ymaximum size no matter what. This is a problem, because the number of things in the "upper" part of the vbox is going to vary, and so I need some dynamic way of making sure the button is always at the bottom of the frame. My "spacer" can't just be a fixed size.

I'm losing my mind here. It really SEEMS like if I set a frame to be a certain size, then inside that frame a put a vbox with "yfill True", then inside that vbox I SHOULD be able to put some elements as far towards the TOP of that vbox as they can go without conflicting with the other elements using align or "ypos 0.0", and then put another element at the very BOTTOM of the vbox with "ypos 1.0" and have empty space in-between. What on earth am I doing wrong here?

This is the spreading out problem:


And this is my code:

Code: Select all

style silent_auction_catalog_card_frame:
    background Frame("gui/frame2.png", 8, 8)
    xysize (250, 800)
    padding (10, 10)

style silent_auction_catalog_card_vbox:
    xfill True
    yfill True
    align(0.5, 0.0)
    spacing 5

style silent_auction_bid_button:
    background Frame("gui/frame2.png", 8, 8)
    xysize (200, 100)
    align (0.5, 1.0)
    top_padding 10
    left_padding 10
    right_padding 10
    bottom_padding 10
    
    

screen silent_auction_catalog():
    frame:
        xysize (1350, 950)
        align (0.5, 0.25)
        top_padding 15
        hbox: #Top row of four cards (only one implemented right now)
            spacing 15.0
            align (0.5, 0.0)
            frame:
                style "silent_auction_catalog_card_frame"
                vbox:
                    style "silent_auction_catalog_card_vbox"
                    add "portrait placeholder" align (0.5, 0.0)
                    text "Bachelor Name":
                        align (0.5, 0.0)
                        size 24
                    text "Description paragraph blah blah blah" size 22 align(0.0, 0.0)
                    text "CURRENT BIDS" size 20 align(1.0, 0.0)
                    if psa_slot0_bids[1]:
                        text "[psa_slot0_bids[1]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[2]:
                        text "[psa_slot0_bids[2]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[3]:
                        text "[psa_slot0_bids[3]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[4]:
                        text "[psa_slot0_bids[4]]" size 18 align(1.0, 0.0)
                    
                    button:
                        style "silent_auction_bid_button"
                        action Notify("Bid Placed"), Return()
                        text "BID":
                            size 36
                            align (0.5, 0.5)
                    

        hbox: #Bottom row of catalog page nav stuff, currently empty because I haven't made it yet
            spacing 15.0 
            align (0.5, 1.0)

[strayerror]

You could try using a side widget, placing the vbox in the center slot, and the button in the bottom slot. Assuming the enclosing frame has a size (or you give the side a size) the vbox contents should stack from the top, with the button appearing at the bottom of the frame.

Going off of memory here but iirc you should be able to achieve this by adding has side 'c b' to the top of your frame, see below:

Code: Select all

            frame:
                has side 'c b'
                vbox:
                    ...
                button:
                    ...

Note that the button is now within the side and not the vbox.

[Gamma Vector]

You could try using a side widget, placing the vbox in the center slot, and the button in the bottom slot. Assuming the enclosing frame has a size (or you give the side a size) the vbox contents should stack from the top, with the button appearing at the bottom of the frame.

Going off of memory here but iirc you should be able to achieve this by adding has side 'c b' to the top of your frame, see below:

Code: Select all

            frame:
                has side 'c b'
                vbox:
                    ...
                button:
                    ...

Note that the button is now within the side and not the vbox.

This seems to be on the right track...Doing has side 't b' kinda helps. (EDIT: "c b" results in the button being very far up the page, for some reason. "t b" works better, but still isn't quite right) With that I can take out the yfill True in the vbox and at least get all the text clustered on the top. But the button still isn't at the bottom of the displayed frame, and the padding is weirdly messed up. No matter what I do, there's this phantom extra space on the bottom and right sides of the frame??

An image of the problem:


My current code:

Code: Select all

style silent_auction_catalog_card_frame:
    background Frame("gui/frame2.png", 8, 8)
    xysize (250, 800)
    padding (10, 10)

style silent_auction_catalog_card_vbox:
    xfill True
    align(0.5, 0.0)
    spacing 5

style silent_auction_bid_button:
    background Frame("gui/frame2.png", 8, 8)
    xysize (200, 100)
    align (0.5, 1.0)
    top_padding 10
    left_padding 10
    right_padding 10
    bottom_padding 10
    
    

screen silent_auction_catalog():
    frame:
        xysize (1350, 950)
        align (0.5, 0.25)
        top_padding 15
        hbox: #Top row of four cards (only one implemented right now)
            spacing 15.0
            align (0.5, 0.0)
            frame:
                style "silent_auction_catalog_card_frame"
                has side "t b"
                vbox:
                    style "silent_auction_catalog_card_vbox"
                    add "portrait placeholder" align (0.5, 0.0)
                    text "Bachelor Name":
                        align (0.5, 0.0)
                        size 24
                    text "Description paragraph blah blah blah" size 22 align(0.0, 0.0)
                    text "CURRENT BIDS" size 20 align(1.0, 0.0)
                    if psa_slot0_bids[1]:
                        text "[psa_slot0_bids[1]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[2]:
                        text "[psa_slot0_bids[2]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[3]:
                        text "[psa_slot0_bids[3]]" size 18 align(1.0, 0.0)
                    if psa_slot0_bids[4]:
                        text "[psa_slot0_bids[4]]" size 18 align(1.0, 0.0)
                    
                button:
                    style "silent_auction_bid_button"
                    action Notify("Bid Placed"), Return()
                    text "BID":
                        size 36
                        align (0.5, 0.5)
                    

        hbox: #Bottom row of catalog page nav stuff, currently empty because I haven't made it yet
            spacing 15.0 
            align (0.5, 1.0)

[Ocelot]

My suggestion: use vbox with box_reverse set To True so it fills from the bottom. Place your button as first element and another vbox, which will contain the rest of the data, second. That second vbox should not have any padding set, so elements would be spaced properly horisontally.

[Gamma Vector]

My suggestion: use vbox with box_reverse set To True so it fills from the bottom. Place your button as first element and another vbox, which will contain the rest of the data, second. That second vbox should not have any padding set, so elements would be spaced properly horisontally.

THIS WORKS!!! OH, I COULD ~SMOOCH~ YOU! Thank you so, so much. Problem completely solved!

[Gamma Vector]

EDIT: I tried to edit the topic of my original post to indicate the issue was solved and...Somehow I accidentally replied to the thread instead. Sorry. ^^;