How to customize field column sizes on a form

[finals_mvp (A.S)]

I’m currently customizing a form view and I’ve attached a screenshot for reference. I’m trying to better control the layout and spacing of fields and labels in a row.

For example at the very first row, I have two columns (“Hooks” and “Picks”) that are placed too far apart from each other, creating a lot of empty space in between.
And DPN File field and the field next to it (the upload button) is really far from it.
I’d like to:

• Show three or more label+field pairs in a single row (not just two i.e., a way to fit as many label+field pairs in a single row or only label, or only field depending if I want to show only label or field for a column).
• Control the width or spacing of the columns to bring fields closer together. (Goal would be to bring first two fields together - Hooks and Picks)
• Possibly align fields to the left or right within a row, depending on the context. (Sometimes I would want to have all the fields align to the left or right, it’s fine if I have to add an attribute to each xml tag for that).
• Understand what layout options Tryton provides to help fine-tune this, such as col, colspan, xalign, yalign, I want to understand these work. I assumed this worked like css flex but I think I got this wrong.

Basically, I’m looking to mix and match fields in a more compact and readable layout, rather than them being too spaced out.

Can someone guide me on how to approach this? Any examples or tips would be greatly appreciated.

Thanks in advance!

[udono]

@finals_mvp

For example at the very first row, I have two columns (“Hooks” and “Picks”) that are placed too far apart from each other, creating a lot of empty space in between.
And DPN File field and the field next to it (the upload button) is really far from it.
I’d like to:

• Show three or more label+field pairs in a single row (not just two i.e., a way to fit as many label+field pairs in a single row or only label, or only field depending if I want to show only label or field for a column).

Here you can use a group with a colspan of 3 of 4 and col="-1". This way you get more flexibility with arranging fields closer together. In Tryton this is often used to add checkboxes (boolean fields).
To have a cleaner look, you should use a col >0, e.g.

<group id="hooks-picks" colspan="2" col="4">
    <label name="hooks">
    <field name="hooks">
    <label name="picks">
    <field name="picks">
</group>

This way the fields and labels of “Hooks” and “Picks” are arranged in the space which is actually occupied by the label and field of “Hooks”. “Total Picks” would move to where actually “Picks” is.

A little cleaner look gives this:

<label name="hooks">
<group id="hooks-picks" colspan="1" col="4">
    <field name="hooks">
    <label name="picks">
    <field name="picks">
</group>

This way the “Hooks” label is in line with the other labels on the left side of the form.

@finals_mvp

• Control the width or spacing of the columns to bring fields closer together. (Goal would be to bring first two fields together - Hooks and Picks)
• Possibly align fields to the left or right within a row, depending on the context. (Sometimes I would want to have all the fields align to the left or right, it’s fine if I have to add an attribute to each xml tag for that).

Here you could play a long time with xexpand, xfilland xalign. But in your example the problem seems to be the default col of 4 in the form definition. So each label and field is arranged in a table with only 4 columns. A field or a label will never step over the column border of the previous column.
But you can change this default by using a col="6" for the general layout and using group for the detail. E.g.

<form col="6">
    <label name=…
</form>

@finals_mvp

• Understand what layout options Tryton provides to help fine-tune this, such as col, colspan, xalign, yalign, I want to understand these work. I assumed this worked like css flex but I think I got this wrong.

Yes, CSS is the representation in SAO, but the XML is also rendered in GTK for the Tryton Client. All the attribute names come from GTK. You can look up their behaviour in tools like gtk-demo.

To be true I havn’t exactly understand the difference between xexpand and xfill. Usually I play around with them.

@finals_mvp

Basically, I’m looking to mix and match fields in a more compact and readable layout, rather than them being too spaced out.
Can someone guide me on how to approach this? Any examples or tips would be greatly appreciated.

Also you can run the Tryton server and client with --dev option to let it reload view changes. In the client you just need to re-open the view to see the changes quasi-immediately. Not sure if this is the default with Sao.
HIH

[nanacoelho (Nadia Coelho Pontes)]

thanks, @udono , this is a very good and helpful explanation!

[finals_mvp (A.S)]

Hey there @udono,

Thanks a lot for your detailed and insightful response. I appreciate the time you took to explain everything.

Would you mind elaborating a bit more on how to practically use these variables too → xalign, yalign, xfill, and yfill in the somewhat similar context (form view) ? I can find them in the documentation, but for practicality, it would be really helpful if the usage is clear to me and how to apply them effectively.

Thanks again!