My Preferences screen layout is broken and I'm not sure why

[Ultra_HR]

Hey there,

I'm trying to code a custom preferences menu. It's supposed to look like this mockup:


I figure the easiest way to get that layout would be to use a grid with 1 column and 4 rows, then split each row up with hboxes and frames. This is the code I've cobbled together to try to achieve that:

Code: Select all

grid 1 4:
    style_group "prefs"
    xfill True

    hbox:
        frame:
            style_group "pref"
            has vbox

            label "display"
            hbox:
                textbutton "window" action Preference("display", "window")
                textbutton "fullscreen" action Preference("display", "fullscreen")

        frame:
            style_group "pref"
            has vbox

            label "transitions"
            hbox:
                textbutton "show all" action Preference("transitions", "all")
                textbutton "show none" action Preference("transitions", "none")

    hbox:
        frame:
            style_group "pref"
            has vbox

            label "skip"
            hbox:
                textbutton "all messages" action Preference("skip", "seen")
                textbutton "seen messages" action Preference("skip", "all")

        frame:
            style_group "pref"
            has vbox

            label "font size"
            hbox:
                textbutton "14" action StylePreference("size", "14")
                textbutton "18" action StylePreference("size", "18")
                textbutton "22" action StylePreference("size", "22")

        frame:
            style_group "pref"
            has vbox

            label "after choices"
            hbox:
                textbutton "stop skipping" action Preference("after choices", "stop")
                textbutton "keep skipping" action Preference("after choices", "skip")
    hbox:
        frame:
            style_group "pref"
            has vbox

            label "auto-forward speed"
            bar value Preference("auto-forward time")

        frame:
            style_group "pref"
            has vbox

            label "music volume"
            bar value Preference("music volume")

    hbox:
        frame:
            style_group "pref"
            has vbox

            label "text speed"
            bar value Preference("text speed")

        frame:
            style_group "pref"
            has vbox

            label "sound volume"
            bar value Preference("sound volume")

Which, in my head, should work fine. But this is what I get out of it:


Clearly I've done something wrong, but I don't understand what. I thought the hboxes in each row would spread the frames evenly across the row, but the first frame in each hbox is taking up all of the row. What should I do to fix that? (I'm not worried about the navigation menu by the way, I've already fixed that since taking that screenshot.)

I could just cheat and use an imagemap of course - but probably some stuff will be added to this menu later, and I would like to learn how to do it properly.

Thanks in advance for any advice!

[78909087]

I would recommend using imagemaps regardless!
(Even if you change things around, all you need to do is change the x,y position, it's simple, and it's really not worth the hassle to use unruly code...)

They're really not that hard to learn to use, and there are helpful tutorials out there for customizing screens, like this one.

Sorry that I can't be of assistance with your current problem, but happy coding!

[xela]

Recommending to use imagemaps unless you believe yourself to be absolutely inept at coding and not willing to learn is a bad idea. You'd be giving up way too much with no real benefit.

As to the layout, you are expecting unreasonable things from your code, there is no need for evil grid here, you're expecting hboxes to do something without telling them how and etc.

Although you may be supplying all the data with style group... It's hard to tell just from the code you posted.

[nyaatrap]

Actually, grid is one of the hardest way. It looks easy at the first glance, but it has zero flexibility. And It's better not to use style group before you fully understand about styles.

[SinnyROM]

Assuming you haven't changed the default preferences style groups, xela is right in that the cause is in the style group:

Code: Select all

init -2:
    style pref_frame:
        xfill True
        xmargin 5
        top_margin 5

    style pref_vbox:
        xfill True

Note that xfill determines whether the element takes up the horizontal space (http://www.renpy.org/doc/html/style_pro ... erty-xfill). I agree that a grid won't be used to its full potential in this case; for single columns, a vbox works just fine.