Pagebreak buttons are not properly aligned on embedded form

  • Profile Image
    MuhammadUmair016
    Asked on June 13, 2020 at 03:53 PM

    I have faced a problem with the button view. I have made a form for my client and now he had integrated the form into his website. When form opens the form in chrome, safari, opera, and any browser through jotform site link. It works fine but my client opens the same one through his website, it shows button problem. I have attached the picture

    It shows like this when open through jotform site link


    1592077414104125830_954853178297936_7823

    But open through the site it shows like this

    1592077977PNG image.png

    Some time size of the button also decreases. It should show the same as in the previous picture

  • Profile Image
    EltonCris
    Answered on June 13, 2020 at 07:21 PM

    We also couldn't reproduce the problem on the standalone form. Can you please provide the exact page where your form is embedded on this site https://www.frankandbeans.com.au/ so we can inspect it on our browser?

    Thanks

  • Profile Image
    MuhammadUmair016
    Answered on June 14, 2020 at 02:03 AM

    Here is the Link for the form.

    https://www.frankandbeans.com.au/returns

    If you open it in your mobile not in the mobile view through the website, you will be able to see the issue.

    When you open through the site you will be able to see the issue that button placement is up and down while if I open through the jotform site, it work side by side as in the previous pictures

  • Profile Image
    Ariel_P
    Answered on June 14, 2020 at 02:52 AM

    Hi there,

    Thank you for your message.

    Please inject the following custom CSS code in your form:

    @media screen and (max-width: 736px) {
        .form-pagebreak {
            justify-content: center;
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .form-pagebreak > div{
            margin: 3px;
        }
    }

    Once applied, the buttons should look like this.

    15921174382020-06-14 14_49_52.jpg


    Please give it a shot and let us know how it goes.

    Related Guide: How to Inject Custom CSS Codes

  • Profile Image
    MuhammadUmair016
    Answered on June 14, 2020 at 03:03 AM

    Sir

    Sorry but may i am not able to convey my complete message 


    I want the button side by side not up and down

    Like in the below picture. It should display like this on my website 1592118178Screenshot_20200613-193355.jpg

  • Profile Image
    Flavio_A
    Answered on June 14, 2020 at 04:29 AM

    Hi @MuhammadUmair016

    Please try using the following code:

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

        .form-pagebreak {

            justify-content: center;

            display: flex;

            flex-wrap: nowrap;

        }

        .form-pagebreak > div{

            margin: 3px;

        }

    }

  • Profile Image
    Amin_N
    Answered on June 14, 2020 at 11:55 AM

    "I want the button side by side not up and down"

    Do note that back/next buttons on your embedded form already show up side-by-side as shown below:

    1592149880Screenshot_2020-06-14 Dashboar

    Please try with a different device/browser and get back to us if the issue persists.

  • Profile Image
    MuhammadUmair016
    Answered on June 14, 2020 at 04:16 PM

    Sir, I have checked in different browsers and the problem still occurs.

    I have attached the most recent view through the browser. have a look. The problem still occur


    1592165768104232968_942642349537076_1171

    Please help me to solve this problem

  • Profile Image
    Amin_N
    Answered on June 14, 2020 at 05:39 PM

    Please try injecting the following CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

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

        width: 48% !important;

    }

    }

    Also, please make sure you check it using Chrome Browser.

  • Profile Image
    MuhammadUmair016
    Answered on June 16, 2020 at 12:13 PM

    Sir,

    I still have a problem with the mobile view. Any other solution regarding my above problem. I have provided everything which I have to explain.


    Please help me.

  • Profile Image
    Kevin_G
    Answered on June 16, 2020 at 02:44 PM

    I was able to replicate the issue on my end: 

    15923328972020-06-16_12h23_54.png

    I was able to fix this after injecting this CSS code: 

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

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

                    width: 50% !important;

                }

        }


    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result: 

    15923329422020-06-16_12h34_53.png

    I hope this helps.