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>
Result:
