How to align submit button with the fields next to it?

  • Profile Image
    shaliniy
    Asked on April 07, 2015 at 04:54 PM

    Thank you, David. I have gotten to the point where I need ONE more item...the submit button is too low and I cannot find the code in the wrapper or button itself to align it with the id #1 and #3. Can you help, please?

     

    Thank you.

     

    Michelle H

  • Profile Image
    Ben
    Answered on April 07, 2015 at 05:04 PM

    Looking at your jotform here: http://www.eftthailand.com/dev/coaching-mentoring/ I see that submit button is a bit down compared with the two fields on its left.

    To vertically center them, you should take this code Michelle:

    #id_2 {
        margin-top: -18px;
    }

    Now, if you want to have the submit button start at the same point as the top input field, you should instead use this one:

    #id_2 {
        margin-top: -14px;
    }

    Now if you want to have the fields on the left align with the submit button so that they start and end at the same point, you should add this CSS code instead:

    #id_2 {
        margin-top: -14px;
    }
    #id_3 {
        margin-top: 8px;
    }

    Now I would also like to suggest adding this code to make the change in the padding:

    #id_1 input.form-textbox, #id_3 input.form-textbox {
        padding: 6px;
    }

    This is how it would look with the last two codes:

    When adding the CSS code, please add it at the bottom of the all code. You can see how to do it here: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image
    shaliniy
    Answered on April 08, 2015 at 03:49 PM

    This wasn't perfect, but it got me the code I needed to work on to make everything align. Thank you!

     

  • Profile Image
    Ben
    Answered on April 08, 2015 at 04:53 PM

    You are welcome.

    Do let us know if you have any further questions and we would be happy to assist.