Need help styling the Configurable List Widget to match my form's design

  • Profile Image
    benjaming
    Asked on February 25, 2018 at 03:49 PM
    For #input_24  I'd like to have the same font and size of the labels and of the input text than the rest of the form. I'd also like to have the 3rd, 4th and 5th column to be much more wide and to let them use the whole row-length.
  • Profile Image
    Jim_R
    Answered on February 25, 2018 at 04:24 PM

    Please inject these CSS codes to your CONFIGURABLE LIST WIDGET's custom css tab:

    @import url('https://fonts.googleapis.com/css?family=Raleway');

    * {

        font-family : 'Raleway', sans-serif;

    }

    .col3, .col4, .col5 {

        width: 33% !important;

    }

    .col3 input, .col4 input, .col5 input {

        width: 98% !important;

    }

    input[type=text],select,textarea {

        box-shadow: none;

        border-radius: 0;

        background: #f2f2f2;

    }

    Complete guide: How-to-Inject-CSS-Codes-to-Widgets

    These codes should take care of the following:

    🔘 Style the fields to match the ones you have on the form

    🔘 Adjust the widths of the 3rd, 4th and 5th columns

    🔘 Make them use up the rest of the remaining width on the form

    RESULT:

  • Profile Image
    Benjami Gérard 
    Answered on February 25, 2018 at 04:51 PM

    Hello,

    The font is working out, but the width of the columns is not doing what it should.

    Check it at https://eu.jotform.com/build/42115693318353#preview


    Thank you in advance.

  • Profile Image
    Jim_R
    Answered on February 25, 2018 at 05:36 PM

    The iframe of the Configurable List Widget needs to be adjusted it seems. To do that, inject these CSS codes to your FORM BUILDER this time (not on your Configurable List widget):

    iframe {

      width: 1280px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

  • Profile Image
    benjaming
    Answered on February 26, 2018 at 02:41 AM

    Hello,

    This still doesn't work...

    I would like to have all fields align left and right on my website, and also being responsive. So I guess that means a width=100%


    These fields are not aligned:

    #input_42_day, #input_42_month, #input_42_year

    - #input_5_country 

    #input_14_0_0, #input_14_0_1, #input_14_0_2, #input_14_0_3, #input_14_1_0, #input_14_1_1, #input_14_1_2, #input_14_1_3, #input_14_2_0, #input_14_2_1, #input_14_2_2, #input_14_2_3

    #input_24

    - and a non-identifiable text box almost at the bottom of my form


    Thanks for your help!

  • Profile Image
    Mike_G
    Answered on February 26, 2018 at 08:26 AM

    We will be glad to help you with your concern, however, we may just need to clarify things first before we proceed in giving you a solution to avoid confusion.

    If I'm understanding your concern correctly, you would like the fields you listed above to match the length of the other fields in your form.

    1519651243t08_14_04.png

    Is that correct?

    Or, do you want the length of all the fields to take the entire width of the form? Which means the margin on the left should just match the margin on the right?

    We may also need you to clarify this — - and a non-identifiable text box almost at the bottom of my form

    I have checked the bottom of your form and I'm not sure which field are you referring to.

    1519651577t08_24_49.png

    We will wait for your response.

  • Profile Image
    Benjami Gérard 
    Answered on February 26, 2018 at 08:40 AM

    Hello,

    Your first assumption is right: I 'd like that there is no field that crosses your red line. 

    If you make that red line longer, you will see that there is one text field that crosses the line as well. it is the text box with the following text: "Je kan ons op onze Facebook-pagina volgen. (...)"


    Thank you.

  • Profile Image
    Mike_G
    Answered on February 26, 2018 at 12:15 PM

    Thank you for the clarification.

    To fix the issue (highlighted in gray) you stated above, please remove the following CSS codes from your form:

    #cid_42, #cid_43 {

        min-width : 100% !important;

    }

    iframe {

        width: 1280px !important;

    }

    Then, inject the CSS codes below

    .form-line {

        width: initial !important;

    }

    .form-input-wide, .form-input {

        max-width: 1000px !important;

    }

    #cid_5 .form-sub-label-container {

        width: 98% !important;

        margin: 0px !important;

    }

    #cid_5 td:nth-child(2) .form-sub-label-container {

        float: right !important;

    }

    #cid_42 span:first-child, #cid_43 span:first-child {

        float: left !important;

        margin: 0px !important;

    }

    #cid_42 span:nth-child(2), #cid_43 span:nth-child(2) {

        margin: 0px 3.5% !important;

    }

    #cid_42 span:last-child, #cid_43 span:last-child {

        float: right !important;

        margin: 0px !important;

    }

    iframe {

        width: 100% !important;

    }

    td.form-matrix-values select {

        width: 100% !important;

    }

    td.form-matrix-values {

        width: 20% !important;

        padding-right: 0px !important;

    }

    #cid_14 table {

        width: 100% !important;

    }

    Here's a clone version of your form where I have applied the changes above — https://form.jotform.com/80564585086971

    The Configurable List widget is a little bit behind the red line

    1519665057t12_09_35.png

    so it will still have a space for the delete button.

    1519665142t12_11_27.png

    I hope this helps. If you have other questions, please feel free to let us know.

  • Profile Image
    Benjami Gérard 
    Answered on February 27, 2018 at 12:25 PM

    You rock!

    Thank you a lot!

  • Profile Image
    Mike_G
    Answered on February 27, 2018 at 01:21 PM

    You are most welcome! Feel free to contact us again anytime should you have other questions or concerns.