Ren'py UI feature request - Website-like table layout

[Counter Arts]

One of the most annoying thing I found while laying out things was that I could not get things to layout like a webpage table and have everything align properly. The grid layout was too strict that required all parts to be equal size and I have long item names. It would make dynamically generating things like store items lists to buy much easier. Also maybe a callback like row_hover would be good. I had to use ui.fixed and alter the ymaximum to something like 28 to align things vertically and hoizontally.

Is it possible to have this kind of layout that I don't have to do a hacky kind of code to use?

EDIT: Either this or I really want to have an size_group parameter for text.

[Aleema]

Actually, hbox and vbox act like "tables". Think of them as <tr> and <td>, respectively.

Code: Select all

<table>
<tr>
       <td width="50%">Box1</td>
       <td>Box2</td>
</tr>
</table>

Equals:

Code: Select all

    $ui.hbox(xfill=True)
    $ui.vbox(xminimum=0.5)
    $ui.text("Box1")
    $ui.close()
    $ui.vbox()
    $ui.text("Box2")
    $ui.close()
    $ui.close()

They're not exactly alike, because Ren'Py doesn't "wrap" objects to determine what is on the next line, so you'll have to use either vbox or hbox whether you want horizontal or vertical lines of widgets. Also, you'll have to know which properties to apply to each box to make the contents do what you want.

And, to be honest, if you want to make something look a certain way you're going to have put some hard work into it. It may take have to meticulously going through each item and aligning it personally. As a programmer, you might be able to find a way around this, but if push comes to shove, you have to put some time in to get what you want.

[Counter Arts]

Those tables are easy to replicate with the existing layout.

I'm talking about a table like this...

Code: Select all

item          | price | buy
---------------------------------------------
lime          |    34 | [buy now!]
Super Arrow   |    34 | [buy now!]
Timer         |   234 | [buy now!]
lance         |  2334 | [buy now!]

Aligning the buttons and the price on the right isn't straightforward. I suspect that I would have to make the text of the left buttons with no backgrounds. Something like that might not come naturally to someone who isn't used to programming and such and I'm not sure I would really want to combine a really long list of items with the viewport.

But if ren'py is trying to make this easier for non-programmers to use then at least I can suggest something that is closer to a non-programmer like a website designer.

[PyTom]

This is something I need to work on. For now, you can get away with the minwidth attribute on ui.text, which ensures that the text is always at least a minimum size, making it possible to line up columns using ui.vbox and ui.hbox.