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

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.

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:

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.

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

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!

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.

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.

We will wait for your response.

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.

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

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

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

You rock!

Thank you a lot!

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