How to center the NEXT page button on the form

  • Profile Image
    cccwebmaster
    Asked on January 28, 2018 at 05:40 PM

    To Whom:

    Some of the alignment 'challenges' I'm experiencing with JotForm have to do with rogue insertions of HTML code that I don't know how they got there.  In the example from the attached image, my Next Page nav button is skewed to the right (even though the alignment property is set to "center") because of this container object that's residing on the page.  When I view the form in Chrome and simply delete the line from that spot, everything aligns perfectly, but I can't figure out a way to remove this in the Form Designer CSS editor.

    The overall question is to how to address an instance of a form object and not affect other usages of it.

    Thanks!

  • Profile Image
    jonathan
    Answered on January 28, 2018 at 06:53 PM

    The hidden page break BACK button was pushing the NEXT button more to the right in the form.

    1517183075zzz 2018-01-29 07.34.59.png


    to workaround this, try adding the next CSS codes instead.

    #form-pagebreak-next_43 {

        margin-left: -115px !important;

        width: 195px !important;

    }


    Result:

    1517183602zzz 2018-01-29 07.52.58.png


    Let us know if this did not work.



  • Profile Image
    cccwebmaster
    Answered on January 28, 2018 at 08:28 PM

    Hi Jonathan:

    Your code brought back the Plan Your Conference button closer to center, but as you can see by the screen cap, not far enough.  I understand that I can play with the values in the code until I get it just right, but I am wary of solutions that solve problems with specific sizing parameters.  This means that I'm really not learning what is causing the problem in the first place, and the next time it comes up, I'm going to have to go back through the same extensive exercise of tweaking the sizing settings.

    Isn't there a way of directly addressing this DIV line in the code, or at least, rewriting the page break element so that the contents of the container are perfectly centered?

    Thanks.1517189267comment_out1.JPG

  • Profile Image
    Nik_C
    Answered on January 29, 2018 at 04:46 AM

    I wouldn't refer to it as a problem exactly since those are back and next buttons of the page break and their default position is left side of the form, like in this example:

    1517218754Screen Shot 2018-01-29 at 10.3

    So if you want to reposition them (move them around), a CSS must be used. This guide might help: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names  so you can get the ID of the field that you want to adjust, then you can apply the CSS code like my colleague provided.

    If you need any further assistance please let us know.

    Thank you!

  • Profile Image
    cccwebmaster
    Answered on January 29, 2018 at 10:11 PM

    Hi Nik:

    Yes, I got the button to "move around" as Jonathan provided, but what I was wondering is why I have to use pixels and not something like align: center.  Not being able to precisely align the buttons would be a disadvantage when viewing later on larger screens, where the imprecise granularity would be exposed.  If there's no way to do this, however, then I've got a good workaround for now, so thanks to you and Jonathan.

  • Profile Image
    Nik_C
    Answered on January 30, 2018 at 02:56 AM

    I understand, but I'm afraid that there is no better way to do that.

    If you have any further questions or if you need any assistance please let us know, we'll be glad to help.

    Thank you!