How do I get the Configurable List to match the rest of the forms style and break the

  • Profile Image
    GTAUSTIN
    Asked on April 19, 2017 at 01:20 PM

    I am trying to match the Configurable List widget style to the rest of the forms style (i.e. the box sizes, font size, color). Also, I am trying to get this form to break the lines apart like they would be if each of the inputs were separate. I am redoing this form, and I am just trying to get it to look nicer and have less.

     

    All the information is pertaining to page two of the document (student information).

     

    Basically what I have below.

     

    I do know that things like the phone number look different, but I am ok with that.

  • Profile Image
    GTAUSTIN
    Answered on April 19, 2017 at 01:41 PM
  • Profile Image
    Nik_C
    Answered on April 19, 2017 at 02:51 PM

    1) Do you want to have the configurable list widget's width match the below fields or 2) you want fields from the configurable list to be each in a new row? 

    The second one is a bit tricky but it is doable.

    Please let us know.

    Also, we didn't receive your second reply, if you can please resend it.

    Thank you!

  • Profile Image
    GTAUSTIN
    Answered on April 19, 2017 at 03:56 PM

    The second one you mentioned is what I want it to look like.

     

     

     

    My second response was added to my original question, but I didnt know how to delete the initial second response, so I just left it blank.

  • Profile Image
    Kevin_G
    Answered on April 19, 2017 at 06:36 PM

    Could you please try injecting the following CSS code to your widget? 

    /* Custom injected CSS code*/

    th {

        display: none;

    }

     

    tr {

        display: block;

    }

     

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before{

     

        font-weight: bold;

     

        display: block;

     

    }

     

    /* Naming the fields*/

     

    td.col1:before {

        content:"Student Name";

    }

     

    td.col2:before {

        content:"Grade";

    }

     

    td.col3:before {

        content:"Birthday";

    }

     

    td.col4:before {

        content:"Student Phone #";

    }

     

    td.col5:before {

        content:"Student Email";

    }

     

     

    /* Positioning the fields in multiple columns*/

     

    td {

        display: block;

    }

    To inject the code to the widget you only need to click on the wizard icon and go to the Custom CSS tab: 

    Then you need to disable the fields label for the widget: 

    Here's a sample form about how this will work: https://form.jotformpro.com/71087092101952 

    Hope this helps.