Is it possible to specify CSS code that will only affect a single, specific page break?

  • gen81465
    Asked on July 21, 2018 at 8:16 PM

    I am building one of my forms, and I added CSS code to center the Back and Next buttons. The problem arises as I want to center the custom text on  #form-pagebreak-next_80 , which would be different from the centering on all other pagebreaks. 

    The CSS code I used for normal centering is:


    .form-pagebreak 
    {
        width: 22%;
        margin-left: auto;
        margin-right: auto;
    }

    Note: I found that 22% is the ideal amount for centering a standard Back and Next button combination, based on the standard form width. 

    I tried to use the following CSS code to change the specific formatting of the one pagebreak, but it doesn't seem to work:

    .form-pagebreak-back_80
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .form-pagebreak-next_80 
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    Any suggestions? And as always, thank you for the excellent help you provide.

    George (gen81465)


  • Elton Support Team Lead
    Replied on July 21, 2018 at 8:41 PM

    Use this :

    #cid_80 .form-pagebreak {

        width: 100%;

    }

    #cid_80 .form-pagebreak-next-container {

        width: 100%;

        text-align: center;

    }

    #cid_80 .form-pagebreak-back-container {

        display: none;

    }

    Result:

    Is it possible to specify CSS code that will only affect a single, specific page break? Image 1 Screenshot 20

  • gen81465
    Replied on July 21, 2018 at 10:43 PM
    Thanks for the help. That solution only works if I don't include the CSS code needed to center all the other (standard) page breaks. I need to be able to include the following CSS code for all of the rest of the page breaks:
    .form-pagebreak {    width: 22%;    margin-left: auto;    margin-right: auto;}
    Originally, the first page break was ok, as long as I didn't try to center any of them.
    George (gen81465)
    On Saturday, July 21, 2018, 8:41:40 PM EDT, JotForm wrote:

    A new response has been received: Answered by EltonCris

    Use this :
    #cid_80 .form-pagebreak {
        width: 100%;
    }
    #cid_80 .form-pagebreak-next-container {
        width: 100%;
        text-align: center;
    }
    #cid_80 .form-pagebreak-back-container {
        display: none;
    }
    Result:
    View this thread on browser » Unsubscribe Thread 1532220099
    ...
  • gen81465
    Replied on July 21, 2018 at 10:43 PM
    Oops. My mistake. I didn't check out the preview of the form. It is only displaying incorrectly on the build page, which is fine with me.
    George (gen81465)
    On Saturday, July 21, 2018, 8:41:40 PM EDT, JotForm wrote:

    A new response has been received: Answered by EltonCris

    Use this :
    #cid_80 .form-pagebreak {
        width: 100%;
    }
    #cid_80 .form-pagebreak-next-container {
        width: 100%;
        text-align: center;
    }
    #cid_80 .form-pagebreak-back-container {
        display: none;
    }
    Result:
    View this thread on browser » Unsubscribe Thread 1532220099
    ...
  • Kevin Support Team Lead
    Replied on July 21, 2018 at 11:49 PM

    As per your last reply it seems like my colleague's code worked. 

    If you need further assistance, let us know. 

    Thanks.