Horizontal Layout for Grid Elements

By default, all Grid-type elements in Joget are displayed vertically. You can use CSS to transform it into a horizontal layout by adding the styling into a Custom HTML form element in your form that contains a grid element. To do so, follow the steps Below:

1. Open the Form with the Grid element you want to edit.
2. Add a Custom HTML.
3. Input the following script and change the IDs to match your Grid element.
   

   <style>
   /* Change the div ID to match the grid element ID 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>

4. Preview your form to confirm the changes.
   

As you can see in the last image, the table is in a horizontal layout instead of the default vertical layout.