Customize Field Widths In Repeat Group Table View

This guide explains how to manage the width of individual fields inside a Repeat Group when displayed in Table View using custom HTML.

When using the Repeat Group Table View layout, fields appear in a tabular format. By default, each column (i.e., field) may share equal width or auto-adjust based on content. To enhance readability or emphasise specific fields, we can manually define each column’s width.

  1. INITIAL SETUP:
  • Drag and drop some fields inside a Repeat field as shown below.
image
  • Drag and drop an “HTML” field as shown below.
image
  1. CONFIGURING THE REPEAT FIELD:
  • Make sure to select the Table view under the Repeat View option.
  • Note: Width control works only in Table View layout.
image
  • Set “Yes” for the “Enable Select List Overlay” option.
image
  • Please add this attribute to your form for the Repeat field: "remove_table_column_custom_styling": true
image
  1. CONFIGURING THE HTML FIELD:
  • Click the pencil icon of the HTML field.
  • Add the following code inside the HTML Edit section.
image
  • Please use this code to define field widths.
  • Here,
    • b7b9-4a0b-0161 is the field ID of the Repeat field.
    • 174e-c6c1-3d63 is the field ID of the field labelled First Name
    • cd92-fad7-8976 is the field ID of the field labelled Last Name
  • Note:
    • Please make sure to update the field IDs as per your form.
    • You can adjust the width values in the CSS as needed. As per the code, when the screen width is 1240px or smaller, the table inside #component-b7b9-4a0b-0161 remains fixed at 1240px, which causes horizontal scrolling within the container. 
<style>
  /* Style for specific component with ID */
  div#component-b7b9-4a0b-0161 {
    overflow-x: scroll;
  }

  /* Media query for responsiveness */
  @media screen and (max-width: 1240px) {
    /* Adjust width of .table-responsive within #component-b7b9-4a0b-0161 */
    #component-b7b9-4a0b-0161 .table-responsive {
      width: 1240px !important;
    }
  }

  /* Make each component the width you want */
  #component-174e-c6c1-3d63 {
    width: 20%;
  }

  #component-cd92-fad7-8976 {
    width: 20%;
  }
</style>
  1. TEST YOUR FORM:
  • Try your form.
  • The First Name and Last Name fields will each occupy 20% of the Repeat Group table width.
  • Other fields will retain default widths unless similarly styled.
image

Note: If you are using a Salesforce Select List field within a repeat field, ensure that the "Disable Select Picker View" option is enabled in the field's setup.

image

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂