Horizontal Layout for Grid Elements

Introduction

By default, all Grid-type elements in Joget are displayed vertically. You can use CSS to transform the Grid into a horizontal layout by adding custom styling to a Custom HTML form element.

This updated example includes additional styling adjustments based on the active theme, ensuring better visual consistency across different Joget themes.

1. Open the Form with the Grid element you want to edit.
2. Add a Custom HTML.
3. Insert the following CSS and update the Grid element ID (field1) to match your Grid.
   

   <style>
   /* Change the div ID to match the grid element ID you are transforming for. */
   div#field1 table thead {
       float: left;
   }
   
   /* Remove unnecessary borders for cleaner layout */
   div#field1 table thead th,
   div#field1 table tbody td {
       border-bottom: 0 !important;
   }
   
   /* Display grid rows horizontally */
   div#field1 table tbody {
       display: flex;
   }
   
   /* Stack header labels vertically */
   div#field1 table thead th {
       display: block;
   }
   
   /* Hide Tablesaw mobile labels */
   div#field1 table tbody td .tablesaw-cell-label {
       display: none;
   }
   
   /* Remove top border for grid action column */
   div#field1 table tbody td.grid-cell-options {
       border-top: 0 !important;
   }
   
   /* Remove row separators */
   div#field1 table tbody tr {
       border-bottom: 0 !important;
   }
   </style>
   

Theme-Specific Styling

Depending on the theme used, additional spacing and border adjustments may be required.

• For Themes Other Than Trimeda:
  

  /* for themes aside from Trimeda theme */
  div#field1 table tbody td:not(.grid-cell-options) {
      display: block;
      clear: none;
      padding-top: .9em;
      padding-bottom: .7em;
  }
  

  This ensures consistent spacing between grid values when displayed horizontally.

• For Trimeda Theme Only:
  

  /* for Trimeda theme only */
  div#field1 table tbody td:not(.grid-cell-options) {
      display: block;
      clear: none;
      padding: var(--datalist-header-padding) !important;
  }
  
  div#field1 table thead th:nth-last-child(2) {
      border-bottom: 1px solid #ced4da !important;
  }
  

  Trimeda uses CSS variables for spacing, so the padding is aligned with the theme’s native layout.

  In the Trimeda theme, the horizontal Grid layout is not fully supported in Form Grid views, which may cause the layout to appear misaligned. However, it works correctly in UI views.
  

• For DX 5 and DX X Themes:
  

  /* for DX5, DX X */
  div#field1 table tbody td:nth-last-child(2) {
      border-bottom: 1px solid #ced4da !important;
  }

  This restores a subtle separator line for better readability in DX-based themes.

For example, if you’re using the DX 9 theme, apply the following styling code in a Custom HTML form element to display the Grid in a horizontal layout:

<style>
/* Change the div ID to match the grid element ID you are transforming for. */
div#field1 table thead {
    float: left;
}

/* Remove unnecessary borders for cleaner layout */
div#field1 table thead th,
div#field1 table tbody td {
    border-bottom: 0 !important;
}

/* Display grid rows horizontally */
div#field1 table tbody {
    display: flex;
}

/* Stack header labels vertically */
div#field1 table thead th {
    display: block;
}

/* Hide Tablesaw mobile labels */
div#field1 table tbody td .tablesaw-cell-label {
    display: none;
}

/* Remove top border for grid action column */
div#field1 table tbody td.grid-cell-options {
    border-top: 0 !important;
}

/* Remove row separators */
div#field1 table tbody tr {
    border-bottom: 0 !important;
}

/* for themes aside from Trimeda theme */
div#field1 table tbody td:not(.grid-cell-options) {
    display: block;
    clear: none;
    padding-top: .9em;
    padding-bottom: .7em;
}
</style>

Expected Outcome

After applying the CSS, the Grid is displayed in a horizontal layout with headers on the left.

Video Tutorial

The video tutorial below demonstrates how to use the Horizontal Layout for grid elements.