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

    Adjust width using CSS

    Asked by kristyhunt on May 17, 2013 at 11:34 AM

    Hello, I'm trying to adjust the width of my shrunken fields. I have grabbed the form ID and then inerted { width: xxxpx; } but it won't adjust. Am I doing something wrong?

    Page URL:
    https://secure.jotformpro.com/form/22885959269981

    hello
  • Profile Image
    JotForm Support

    Answered by Morian on May 17, 2013 at 12:20 PM

    Hello there! 

    Having checked the source code, you would need to look for codes like this

    <li class="form-line form-line-column" id="id_7">

    ...basically all under the "form-line form-line-column class" and then you can inject the CSS code to adjust each shrunken field to your desired size

    Example :

    #id_7 { width:250px; height:100px;} 

  • Profile Image
    JotForm Support

    Answered by abajan on May 17, 2013 at 12:30 PM

    Hi Duane

    There's actually quite a bit that needs correcting in your CSS. There are several rules without selectors and a couple instances of selectors ending in commas. I'll see what I can come up with and get back to you. Then we can make additional adjustments as necessary.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on May 17, 2013 at 01:04 PM

    Hi again

    Please replace your CSS with the following:

    #id_19, #id_23, #id_15 {
    width: 218px;
    }

    #id_11, #id_7, #id_9, #id_33 {
    width: 213px;
    padding-left: 5px;
    }

    #id_27 {
    width: 446px;
    }

    #input_19 {
    width: 100px;
    height: 50px;
    }

    #input_36 {
    width: 265px;
    }

    #input_17 {
    width: 198px;
    }

    #input_11 {
    width: 193px;
    }

    #input_9_0 {
    width: 64px;
    text-align: left;
    }

    #input_9_1 {
    width: 64px;
    text-align: left;
    }

    #input_9_2 {
    width: 64px;
    text-align: left;
    }

    #input_7_0 {
    width: 77px;
    text-align: left;
    }

    #input_7_1 {
    width: 77px;
    text-align: left;
    }

    #input_7_2 {
    width: 77px;
    text-align: left;
    }

    #input_23_0 {
    width: 70px;
    text-align: left;
    }

    #input_23_1 {
    width: 70px;
    text-align: left;
    }

    #input_23_2 {
    width: 70px;
    text-align: left;
    }

    #input_33 {
    width: 160px;
    }


    You can always let us know if additional adjustments need to be made.

    Thanks