What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do I increase the size of textboxes used in the Configurable List Widget?

    Asked by waltzb on March 27, 2016 at 01:47 AM

    I'd like to match better all the text box and font sizes in the form.

     

    The only custom CSS that I'm currently using is:

     

    .col1, .col2, .col3, .col4 {

    padding: 10px;

    font-size: 16px;

    }

     

    Page URL:
    https://form.jotform.com/53215078102142

    size textboxes configurable list list widget
  • Profile Image
    JotForm Support

    Answered by Boris on March 27, 2016 at 06:32 AM

    If you want the Text Box fields from inside the Configurable List widget to have the same styling as the ones on your form, please apply this custom CSS to the widget:

    input[type="text"] {
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;
    background-color: #FFF;
    border-color: #545151 #888 #E1E1E1;
    border-style: solid;
    border-width: 1px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    padding: 8px 4px;
    }

    It is the same styling used by your other Text Box fields, so the form would end up looking like this:

    If you also want the Drop Down fields to look the same as in your form, simply add ", select" into the selector of the custom CSS, so the code would end up looking like this:

    input[type="text"], select {
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;
    background-color: #FFF;
    border-color: #545151 #888 #E1E1E1;
    border-style: solid;
    border-width: 1px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    padding: 8px 4px;
    }

    And your Configurable List would end up looking like this:

    Please try it out and let us know if you need any further assistance, we are here to help.

  • Profile Image

    Answered by waltzb on March 27, 2016 at 12:33 PM

    Boris,

    Thank you for quick response! After adding the custom CSS everything worked except for adding the ", select" to the widget. The dropdown boxes remained smaller. I looked in preferences, but I'm assuming something else is controlling that for the entire form?

    How would I go about tracking down what might be doing that?

    Also, what would you add to increase the width of the boxes in the widget?

  • Profile Image
    JotForm Support

    Answered by Kiran on March 27, 2016 at 12:54 PM

    As I check your JotForm, I see that the configurable list widget is displaying correctly at my end.

    Could you let us know which browser you are using? Please try opening the form in a different browser and see how it is displaying. If you can provide us with the screenshot of the issue, it would be helpful for us to further investigate the issue.

    Thank you! 

  • Profile Image

    Answered by waltzb on March 27, 2016 at 01:03 PM

    Hmm. Interesting. I'm using Chrome on a MacBook. Here is what I'm seeing.

    Here it is in Safari

  • Profile Image

    Answered by waltzb on March 27, 2016 at 01:40 PM

    Also, is it possible to apply Boris' custom CSS to individual columns? I'm asking because now that I see how the fields can be increased, I'd like to reduce the size of column 3 in my form so that .col1 and .col2 can be increased in size. 

    Thank you again.

  • Profile Image
    JotForm Support

    Answered by Kiran on March 27, 2016 at 01:42 PM

    Well. I've checked the issue on a Mac emulator and was able to replicate the issue at my end. This seems to be an issue with the browser on Mac OS. In order to display it correctly on Mac OS, you'll set webkit-appearance to none.

    However, by using this code in the CSS it'll not be displaying the down arrow on the select dropdown.

    This may be resolved by adding additional CSS code to add a background image to the select dropdown.

    Please add the following CSS code to the widget in addition to the code provided by our colleague.

    select {

    min-width: 120px;

    -webkit-appearance:none;

    background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

    }

    It should be now displaying the dropdown as shown below:

     Hope this information helps! 

  • Profile Image
    JotForm Support

    Answered by Kiran on March 27, 2016 at 01:48 PM

    To answer your other question, Yes. We can apply the CSS code to each column individually by using the column number class and/or the element in the column as shown below.

    .col1 {

    your CSS code comes here;

    }

    .col1 input {

    your CSS code comes here;

    }

    If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image

    Answered by waltzb on March 27, 2016 at 02:19 PM

    Kiran,

    Thank you. It works perfectly. Just to be helpful to anyone else who might look at this in the future. Here is a pic and custom CSS that I ended up using based on your and Boris' help.

    Thanks again.

    .col1, .col2, .col3, .col4 {

    padding: 5px;

    font-size: 16px;

    }

    .col1 input[type="text"], select {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    width: 225px;

    }

    .col2 input[type="text"], select {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    width: 180px;

    }

    .col3 input[type="text"], select {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    width: 125px;

    }

    select {

    min-width: 120px;

    -webkit-appearance:none;

    background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

    }

  • Profile Image
    JotForm Support

    Answered by Kiran on March 27, 2016 at 02:39 PM

    Great! Glad to see that the issue is now resolved for you. A small correction in the code provided above to be done. Since column 1 and 2 are provided with input text box and column 3 is provided with select dropdown, it is not required to have select for .col1 and .col2. In the same way, .col3 is not required to have input text. Also, since we are having separate code for each column, I'm also merging the separated select code with .col3.

    Here is the updated CSS code:

    .col1, .col2, .col3, .col4 {

    padding: 5px;

    font-size: 16px;

    }

    .col1 input[type="text"] {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    width: 225px;

    }

    .col2 input[type="text"] {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    width: 180px;

    }

    .col3 select {

    border-radius: 4px;

    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) inset;

    background-color: #FFF;

    border-color: #545151 #888 #E1E1E1;

    border-style: solid;

    border-width: 1px;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding: 8px 4px;

    min-width: 120px;

    -webkit-appearance:none;

    background: url('https://shots.jotform.com/kiran/shared/down-arrow.png') no-repeat 105px 8px;

    }

    Hope this information helps! 

  • Profile Image

    Answered by waltzb on March 27, 2016 at 03:06 PM

    Ah, makes sense. Thanks again!