Centering back and next buttons

  • louisgrisworldhomecare
    Asked on February 22, 2018 at 11:54 AM

    Hello,


    When I use the advanced CSS editor to center and enlarge the back and next buttons, the question headers left align and wrap text instead of extending horizontally the entire width of the form. Any idea?


    Thanks,

    Louis

  • Adrian
    Replied on February 22, 2018 at 1:01 PM

    Please try centering the buttons using Custom CSS only and avoid using the Advanced Designer.
    Copy and paste the CSS code below to your form to center the Next and Back buttons.
    Adjust the font size as you wish to make the buttons bigger.

    .form-pagebreak {
        text-align: center !important;
    }
    #cid_29 .form-pagebreak .form-pagebreak-back-container:first-child {
        display: none;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
        font-size: 18px;
    }
  • louisgrisworldhomecare
    Replied on February 22, 2018 at 1:08 PM

    Hi Adrian,


    I pasted the code and unfortunately only the text in the buttons changed, not the buttons themselves.


    Thanks,


    Louis

  • Adrian
    Replied on February 22, 2018 at 1:20 PM

    I have cloned your form and pasted this CSS code.

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

        font-size: 18px;

        padding: 15px 30px;

    }

    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {

      float: none;

      display: inline-block;

    }

    .form-pagebreak {

      text-align: center;

    }

    https://form.jotform.com/80525641421954

    1519323479ttt Screenshot 10

    The buttons are centered and their size changed.

    You can adjust the font size and the padding as you wish.

    Let us know if you need further help.

  • louisgrisworldhomecare
    Replied on February 22, 2018 at 1:35 PM

    Great, this worked for desktop view. Is there any way to make the buttons appear on the same line on mobile? They appear stacked as is.


    Thanks,

    Louis

  • Adrian
    Replied on February 22, 2018 at 2:32 PM

    Please add this additional CSS.

    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {

      max-width: 49%;

    }

    @media screen and (max-width: 689px) {

      .jotform-form .form-all {

        margin: auto !important;

      }

    }

     

    Here is how the form looks on smaller screens:

    1519327599mob Screenshot 10

  • louisgrisworldhomecare
    Replied on February 23, 2018 at 10:03 AM

    Worked perfectly. Thanks for the help!