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

  • shaliniy
    Asked on April 7, 2015 at 4: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

  • Ben
    Replied on April 7, 2015 at 5: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:

    How to align submit button with the fields next to it? Image 1 Screenshot 20

    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.

  • shaliniy
    Replied on April 8, 2015 at 3:49 PM

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

     

  • Ben
    Replied on April 8, 2015 at 4:53 PM

    You are welcome.

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