How to change vertical padding on a text field?

  • Aaardvaark
    Asked on March 23, 2014 at 9:38 PM

    Hi

     

    I'm struggling to control form layout on this form, but I can't fix one problem . . . see form at http://canberrabirds.org.au/about-cog/joining-cog-and-renewing/

     

    Under Membership and payment see line called "Donation".   I want to make the text box "Donation to Canberra Birds  Conservation Fund" sit up level with the Donation text box.  There is no vertical padding on the Donation field, but there is on the text field, so they don't align. I don't know how to control vertical padding, in fact I can't control anything about plain text field position really.


    Similar problem lower down under "Preferences" heading.  The text field "Please indicate ..."  under the "Preferences" heading has padding above, so the Preferences heading ends up being too far from the text below it.  In fact the heading is closer to the last item above it than it is to the relevant item below.  I need to get the text field "Please indicate ..." up higher, by reducing top padding to zero.  But I still want padding below, so if I can't independently control top and bottom padding I'll have to insert a blank text field.

     

    So my questions:

     

    1) how do I control vertical padding in a text field?

    2) generally, do you have a list of ALL custom CSS entries to inject that control format and layout?

    3) is there a way of easily finding the ID of text fields and others that have no info in their properties?  I have to delete the text field, add a temporary text box, find out the ID of the text box, delete the text box, add a new text field and assume its ID will be the same as the text box was.

     

    Thanks!

     

  • Ashwin JotForm Support
    Replied on March 23, 2014 at 11:51 PM

    Hello Aaardvaark,

    Please inject the following custom css in your form to align the text field:

    #text_62{padding-top: 3;}

    #text_58{padding-top: 0;}

    .form-html p {

    margin: 0;

    }

    The following guide should help you in custom css injection:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please find below the answers to your query:

    1. how do I control vertical padding in a text field?

    It can be done by injecting custom css code.

     

    2. generally, do you have a list of ALL custom CSS entries to inject that control format and layout?

    We do not have list of custom css at it depends on a particular form. You can search in our forum for css injected solution. http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

     

    3) is there a way of easily finding the ID of text fields and others that have no info in their properties?  I have to delete the text field, add a temporary text box, find out the ID of the text box, delete the text box, add a new text field and assume its ID will be the same as the text box was.

    How to find the field Ids:

    http://www.jotform.com/help/146-How-to-Find-Out-the-Field-ID-and-Name-in-a-Web-Form

    http://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field

    But for text fields, you will have to use Firebug to determine the targeted elements (CSS selectors).

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!