How do I reduce the space around the form

  • coigis
    Asked on May 29, 2015 at 7:18 PM

    How do I reduce the space around my form? There are bunch of css codes being injected, maybe after I played with the designer? Now I'm not sure which css codes should I modify.

  • raul
    Replied on May 29, 2015 at 7:24 PM

    Is your form embedded in a website? If so, can you let us know the URL of the web page where we can check it out? This will allow us to provide the necessary code you need to modify.

    We'll wait for your response.

  • coigis
    Replied on June 1, 2015 at 12:11 PM

    It's http://maps3.cityofirvine.org/solarpanel/solarcalc.html

    Also, i would like to line up the fields in columns, especially if you scroll towards the bottom, in sections Tag A, B and C. I would like the fields in the second column to align.

    Another thing is, the look is different with Chrome, Firefox and IE.

    Thanks!

  • Carina
    Replied on June 1, 2015 at 12:35 PM
     
    .jotform-form {
        padding: 0px 0 !important;
    }

    Let us know if we can assist you further.   

  • coigis
    Replied on June 1, 2015 at 1:01 PM

    That reduces the space at the top and at the bottom, what about the sides?

    Also, how to align the columns?

  • Charlie
    Replied on June 1, 2015 at 2:36 PM

    You can try changing the padding values specifically like this:

    .jotform-form {

     padding-top: 0px !important;

     padding-bottom: 0px !important;

     padding-right: 0px !important;

     padding-left: 0px !important;

    }

     

    You can learn more about how to specify the padding here: CSS padding values.

    About the columns, you can manually adjust the first and second column's width so that they'll be align vertically.

    Here's an example:

    li.form-line.form-line-column.form-col-1 {

        width : 300px;

    }

    li.form-line.form-line-column.form-col-2 {

        width: 200px;

    }

    However, this will adjust everything, not only the ones in Tag A, B and C. You'll need to manually choose the fields using the form field IDs. 

    Do let us know if you need more help on this.

    Thank you.

  • coigis
    Replied on June 1, 2015 at 3:17 PM

    There still spaces on both sides of the form after setting the padding values on all sides.

    And for column alignment, I tried manually adjusting individual fields by specifying field id. However, the text box moves, but not the label that's attached to it.

  • Carina
    Replied on June 1, 2015 at 4:39 PM

    If you wish to move also the label you can replace the input for label:

    #input_4 - field ID

    #label_4 - correspondent label ID

    To remove the space on the sides please add this css code:

    .form-line {
        margin-left: 5px !important;
        margin-right: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
     
    You can also change the form's width.
    If you need further support please let us know.
  • coigis
    Replied on June 1, 2015 at 5:10 PM

    The look is different across the browsers. IE and Firefox are somewhat closer with how they look. Is there a way to fix this?

    Chrome:

    How do I reduce the space around the form Image 1 Screenshot 40

    Firefox:

    How do I reduce the space around the form Image 2 Screenshot 51

    IE:

    How do I reduce the space around the form Image 3 Screenshot 62

  • raul
    Replied on June 1, 2015 at 5:54 PM

    You can try enabling form columns using the form designer.

    How do I reduce the space around the form Image 1 Screenshot 20

    This should give the same spacing on the 3 browsers. Then you can move the fields to a new line for the ones in which you only want to show in 2 columns (this guide can help you with that: https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm)

  • coigis
    Replied on June 1, 2015 at 6:02 PM

    How come I don't see the number of columns option in the designer?

    How do I reduce the space around the form Image 1 Screenshot 20

  • raul
    Replied on June 1, 2015 at 6:29 PM

    I'm not sure why you're not able to set the columns number. But please try to save your changes (leave the Enable form columns checked) close the designer and try to open it again.

    Let us know if you're still unable to set the columns number.

  • coigis
    Replied on June 1, 2015 at 7:26 PM

    Ok, i'm able to set the number of columns. However, there's this issue. Under Tag B, after selecting all the dropdowns, THWN status got indented to the right a bit than RHW and XHHW status. It's supposed to align with all the fields in the third column. Why's that? (in order to see different status, just try selecting different Wire used.)

     

     How do I reduce the space around the form Image 1 Screenshot 20

  • Charlie
    Replied on June 1, 2015 at 10:59 PM

    Have you tried adjusting the padding of those fields?

    Here's an example code that you can use:

    #id_138, #id_161 {

        padding-left: 20px !important;

    }

    The code above adjusts the field "THWN Status".

    Let us know if that works.

  • coigis
    Replied on June 2, 2015 at 10:58 AM

    Unfortunately it didn't work after injecting the code above.

  • Charlie
    Replied on June 2, 2015 at 11:18 AM

    I've cloned your form from this website: http://maps3.cityofirvine.org/solarpanel/solarcalc.html. After cloning it, I can't seem to find the custom CSS code.

    I then added the custom CSS code I mentioned above.

    How do I reduce the space around the form Image 1 Screenshot 30

    I then assume you are referring to Tag B and Tag C. In my case, this is how it is displayed. 

    How do I reduce the space around the form Image 2 Screenshot 41

     

    It needs a little adjustment but it can be done using those CSS selectors. 

    Here's my cloned form: http://form.jotformpro.com/form/51524794175966.

    Let us know if we're missing something.

    Thank you.

     

  • coigis
    Replied on June 2, 2015 at 11:36 AM

    It works after adding the code in Designer. Earlier I added the code in Preferences--Inject Custom CSS. What's the difference between adding the code in Designer and in Preferences?

  • Charlie
    Replied on June 2, 2015 at 12:06 PM

    The "Form Styles" section under the "Preferences" is the earlier method/option to inject custom CSS code when the Form Designer was not yet implemented. But I believe it should still worked there, the form might have not saved when you injected the CSS code there or the code might have been injected to a wrong section. It would be best to add the Custom CSS code directly in the Form Designer tool.

    Thank you.

     

  • coigis
    Replied on June 2, 2015 at 12:10 PM

    Ok, thanks for all the help!