Table formatting for Forms

  • Profile Image
    mfon.nkono
    Asked on October 26, 2021 at 02:02 PM

    Hi there,

    I received feedback for one the forms that I am sending out to be completed. There is a table in the form where the calls maintain one size but still have a slider at the bottom. Would it be possible to add a reformatting option where there can be a variety of column widths but the slider is still there.

    Looking forward to your response.

    Thanks!

    Screenshot
  • Profile Image
    Hanne_L
    Answered on October 26, 2021 at 04:35 PM

    @mfon.nkono

    I apologize, I am not sure I understand what you mean. Do you wish to have the option to set the width of individual cells?

    If you select the classic format, you can change things such as the width of the entire form, making room for more columns.

    Please clarify what you want to achieve.


  • Profile Image
    mfon.nkono
    Answered on October 26, 2021 at 04:53 PM

    Hi!

    Yes, I am trying to change the width of the cells in the form. Is that only possible if I use the classic format?

  • Profile Image
    Hanne_L
    Answered on October 26, 2021 at 06:38 PM

    @mfon.nkono

    Thank you for clarifying!

    Yes, you can manually set the width of columns in the options if you have the classic layout.

    1635287818_6178830a687c0_

    If you would like to keep fields on separate pages, you can add page breaks wherever you'd like them.

    Please, do let me know if you have additional questions.

  • Profile Image
    mfon.nkono
    Answered on November 01, 2021 at 10:37 PM

    Hi Hanne,

    Thanks for getting back to me. I tried using the solution you provided but the individual information columns didn't increase in width. Only the first column did with the fixed values. Do you have another solution to this?

    Thanks!

    1635820609_6180a441898ef_Screen Shot 202

  • Profile Image
    Yau_C
    Answered on November 02, 2021 at 02:06 AM

    Hi,

    You may apply this CSS to your form if it's in classic layout mode:

    tr.form-matrix-tr.form-matrix-value-tr td:nth-child(2) {
    width: 20% !important;
    }


    Result:1635833151_6180d53f64388_

    Here is my cloned version: https://support.jotform.com/build/213050890545958

    Let us know if you need further assistance.

  • Profile Image
    mfon.nkono
    Answered on November 02, 2021 at 12:04 PM

    Hello Yau,

    Thank you! It worked. Is there another option for when it is in the other format?

    Thanks again.

  • Profile Image
    Yau_C
    Answered on November 02, 2021 at 12:46 PM

    Hi,

    Other format, are you referring to card layout format?

    You cannot customize your form with CSS in card layout.

  • Profile Image
    mfon.nkono
    Answered on November 02, 2021 at 12:53 PM

    Okay sounds good. Thanks for your help!