How to make Tapestry's BeanEditor horizontal?

Question

In Tapestry 5.3, BeanEditor comes in the vertical form, looking like this:

╔════════════════════════════════════╗
║           Label1  Value1           ║
║           Label2  Value2           ║
║           Label3  Value3           ║
║           Label4  Value4           ║
╚════════════════════════════════════╝

Is there a property or something else that could make it become horizontal, like this?

╔══════════════════════════════════════════════════════════════════╗
║ Label1 Value1 | Label2  Value2 | Label3  Value3 | Label4  Value4 ║
╚══════════════════════════════════════════════════════════════════╝

Answer 1

You can achieve this by adding some custom css. Tapestry uses good class names for you to target all elements. Just add some css with a higher specificity to overwrite the tapestry defaults.

The following will give you your desired result. You'll have to play with it a bit (colors, widths etc.) to get it fully to your liking but this will fix the layout for you.

body DIV.t-beaneditor-row {
    float: left;
    width: 300px;
}

body DIV.t-beaneditor-row LABEL {
    width: 100px;
}