How to resize the columns and center its text?

  • sedres
    Asked on August 8, 2025 at 2:41 PM
    Is there a way to get the Quantity Needed column to be less wide and for the number to appear in the center instead of left justified?
  • Ronald JotForm Support
    Replied on August 8, 2025 at 3:05 PM

    Hi sedres,

    Thanks for reaching out to Jotform Support. You can easily resize the columns and centered its options by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    /* Reduce the width of the second column */
    .form-matrix-values {
      width: 120px !important; /* adjust to your desired width */
      max-width: 120px;
      padding: 0;
    }

    /* Center the dropdown text */
    .form-matrix-values select.form-dropdown {
      text-align: center;
      text-align-last: center; /* for modern browsers */
    }

    /* Optional: ensure the select box stays within the reduced width */
    .form-matrix-values select.form-dropdown {
      width: 100% !important;
      box-sizing: border-box;
    }

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    How to resize the columns and center its text? Image 1 Screenshot 30

    See the screenshot below for the results:

    How to resize the columns and center its text? Image 2 Screenshot 41

    Give it a try and let us know how it goes.

  • sedres
    Replied on August 8, 2025 at 3:32 PM

    Thank you, Ronald. This is PERFECT! Thank you so much! You've made my day!


Your Reply