Submit button not centred

  • stringtheorist
    Asked on October 16, 2014 at 11:37 AM

    I have been unable to get the Submit button to remain centered reactively as window is resized. It seems stuck in one position. I have tried editing the CSS to no avail.

    Please advise.

  • David JotForm Support
    Replied on October 16, 2014 at 1:33 PM

    Hi,

    I made several changes to your form and its CSS.  It appears that the overall width of 900px compared to the widths being forced on the fields, caused the form to be stretched in certain places.  This in combination with your forced positioning of your submit button was causing the button to move everywhere except the center.  I removed the position attributes of the submit button and constrained the width of the total form in order to make the fields like up and allow for the submit button to center.  This is the form I came up with:

    http://form.jotformpro.com/form/42885095341965?

    You can clone this form by following the steps in this guide:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    If there is still anything you do not like about it, let us know and we will be happy to make any changes you would like.

  • stringtheorist
    Replied on October 16, 2014 at 1:38 PM

    Fantastic. Many thanks! :)

  • stringtheorist
    Replied on October 16, 2014 at 1:46 PM

    Hmmm. Something's still not right because when I preview your form in the editor the button is still pushed over to the right, and doesn't realign with a page resize :/

  • David JotForm Support
    Replied on October 16, 2014 at 2:30 PM

    This is how the submit button looks in all browsers on the live version for me:

    Submit button not centred Image 1 Screenshot 20

    The position is fixed though so when the form is made smaller within the page the button does stay in the middle.  Are you seeing different results or is this not what you were looking for?  Let us know and we will be happy to have another look.

  • stringtheorist
    Replied on October 16, 2014 at 2:55 PM

    It's not quite working for me. This is what preview looks like:
    http://www.jotformeu.com/form/42885325372359

    Here is how it looks on my webpage:
    http://www.huntingdonguitarteacher.co.uk/contact.html

    I am seeing text spilling out to the right, and an oversized button that isn't centered.

  • David JotForm Support
    Replied on October 16, 2014 at 4:06 PM

    I made some changes directly to the CSS.  When you opened the form in the form designer again, the previous CSS was applied again.  Clicking on the submit button in the form designer should allow you to customize it to taste:

    Submit button not centred Image 1 Screenshot 30

    Also under form layout, change it to 550 from 500.  This will allow for enough space for the text:

    Submit button not centred Image 2 Screenshot 41

    These two changes as well as changing the text size in the form designer should allow you to get the form looking the way you would like.

    Let us know if there are any more changes you would like to make and we will be happy to assist you.

  • stringtheorist
    Replied on October 16, 2014 at 4:45 PM

    Still isn't working. This is what it looks like now (using your suggested settings):
    http://www.huntingdonguitarteacher.co.uk/contact.html

    The button is too small, still isn't centered. And there is still text overflowing the fields in the form.

  • KadeJM
    Replied on October 16, 2014 at 6:06 PM

    To center your submit button in the middle of your text below the whole of your form you need to use the following code:

    .form-submit-button {

        margin-right : 150px;

    }

    Submit button not centred Image 1 Screenshot 20

    As for the text labels overflowing beyond the inputs that is happening a combination of the width of your form and the existing specified sizing therefore it is conflicting. To fix it you will have to adjust it some more so that it removes the overflow. If I can find the fix for this part then i'll update you.

  • stringtheorist
    Replied on October 16, 2014 at 6:11 PM

    Thanks. I just tried that fix for the button, but as you can see following the above links, it still isn't central. Also, the label font size now jumps up hugely when viewed on my phone.

  • Ben
    Replied on October 16, 2014 at 6:19 PM

    Hi,

    Can you please inject this CSS into your jotform?

    div#cid_2.form-input-wide > div.form-buttons-wrapper {
        width: 100%;
    }
    div.form-buttons-wrapper button.form-submit-button.form-submit-button-simple_orange {
        font-size: 18px;
        line-height: 10px;
        margin-right: 0;
        width: 200px;
    }

    You can see how the submit button would look after you do here: http://form.jotformpro.com/form/42886897819986

    Do let us know if this is what you wanted to achieve.

    Best Regards,
    Ben

  • stringtheorist
    Replied on October 16, 2014 at 6:22 PM

    Thanks Ben! That works perfectly now. :)

  • Ben
    Replied on October 16, 2014 at 6:28 PM

    Hi,

    You are welcome I am glad to hear that.

    Do let us know if you have any further questions or issues and we will be glad to assist you with them.

    Best Regards,
    Ben

  • stringtheorist
    Replied on October 17, 2014 at 11:13 AM

    Cheers Ben.

    I am still curious as to where all the white space is coming from above and below the form as it appears on my webpage. Could you take a look please?
    http://www.huntingdonguitarteacher.co.uk/contact.html

    Also, what would be the best way to shift all the form content to the centre of the blue box at full display view (still aligned left), but have it move to the left as the page is resized?
  • Ben
    Replied on October 17, 2014 at 11:39 AM

    Hi,

    I do see what you mean and it is easy to fix, but I have moved the issue to a new thread so that we can set it up properly for you. You can find the thread here: http://www.jotform.com/answers/445072

    Also, I have moved your other question to another thread as we might need several attempts to have it working just the way you would like it to be :)

    The other thread is here: http://www.jotform.com/answers/445077

    Best Regards,
    Ben

  • stringtheorist
    Replied on October 17, 2014 at 11:40 AM

    Thanks mate. :)

  • Ben
    Replied on October 17, 2014 at 11:41 AM

    Hi,

    No problem :) We want to make sure each issue gets the full attention :)

    Best Regards,
    Ben