How to adjust specific field in form with CSS?

  • naylma01
    Asked on April 2, 2018 at 2:42 PM

    I'm trying to adjust the spacing between only certain certain questions.  I understand I can modify the CSS for the entire form, or use the Advanced Editor to modify this, but it affects the entire form.

    Is there a some kind of CSS form generator? Can I use CSS to just target the spacing between certain fields and not others?

    Thank you.

    Jotform Thread 1432589 Screenshot
  • Nik_C
    Replied on April 2, 2018 at 3:40 PM

    Yes, you can do that with CSS, but you have to target the field by using the ID of the field (since ID is a unique attribute). This guide should help you: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    If you need any assistance please get back to us.

    Thank you!

  • naylma01
    Replied on April 2, 2018 at 4:21 PM

    I'm clearly doing something wrong.  When I am adjusting the margin and padding values, they seem to be affecting the text area itself, not the entire question field.

    Form: https://form.jotform.com/80875118859168

     

    #input_39 {

        width : 350px;

        margin-bottom : 0 !important;

        padding-bottom : 0 !important;

        text-transform : capitalize;

    }

     

    #input_40 {

        margin-top : 0 !important;

        padding-top : 0 !important;

        margin-bottom : 0 !important;

        padding-bottom : 0 !important;

        width : 225px;

        text-transform : capitalize;

    }

     

    #input_41 {

        margin-top : 0 !important;

        padding-top : 0 !important;

        margin-bottom : 0 !important;

        padding-bottom : 0 !important;

    }

     

    #input_42 {

        margin-top : 0 !important;

        padding-top : 0 !important;

        text-transform : capitalize;

    }

  • Kevin Support Team Lead
    Replied on April 2, 2018 at 5:25 PM

    Please kindly try replacing each "input" with "id", that should affect the field's container instead. 

    Let us know how it goes. 

  • naylma01
    Replied on April 3, 2018 at 12:43 AM
    Where do I find the ID to which you are referring? The link I was sent showed me that under advanced options for the field, I can find the field ID there, which is what I used.
    ...
  • Nik_C
    Replied on April 3, 2018 at 3:08 AM

    In order to adjust those fields, you have to use ID of the div:

    1522738908Screen Shot 2018 04 03 at 8 Screenshot 10

    And that is just structure of the HTML, you have to target the div that is a parent of the field that you want to adjust.

    So to adjust input_39 field, you have to use cid_39 ID.

    input_40 will be cid_40 and so on.

    You can use Inspect element in your Browser:

    1522739278Screen Shot 2018 04 03 at 9 Screenshot 21

    To see the structure of the page and find the ID.

    Let us know if you need any further assistance.

    Thank you!

  • naylma01
    Replied on April 3, 2018 at 10:43 AM
    With that info, I was able to obtain those ID's by using the Inspect
    element feature.
    Thanks,
    Matt N.
    Matthew A. Naylor
    Partner/CEO
    LionTech
    *A Juniata Computer Company*
    151 Barrington Lane
    Bellefonte, PA 16823
    (814) 531-5185 - Main
    (814) 644-8684 - Cell
    mnaylor@juniatacomputer.com
    ...