Page History

By default, all grid-type elements in Joget are displayed in a vertical layout.

We can use the CSS below to transform it to a horizontal layout. You can add the styling into a custom HTML form element in your form that contains a grid element.

This is the CSS for the "Grid" element. Feel free to adapt/modify the style for different grid-type elements and to your requirements.

<style>
/* Change the div ID to match the grid element ID that you are transforming for. */
div#field1 table thead {
    float: left;
}
div#field1 table tbody {
    display: flex;
}
div#field1 table thead th {
    display: block;   
}
div#field1 table tbody td {
    display: block;
    clear: none;
}
div#field1 table tbody td .tablesaw-cell-label {
    display: none;
}
</style>