Problem with buttons

  • Profile Image
    Flourens_Pierre
    Asked on February 09, 2021 at 05:57 AM

    Hello,


    I have developed a form but the buttons are not working on mobile. Please find hereafter some print screens1612867577_602267f95dffc_Capture d’é

    For example here the third button is clicked (see the yellow highlight),but not selected when I try to click. the form is this one: https://form.jotform.com/203313044405339

    Can you please get back to me with the Front end code snippets to add ?


    cheers


  • Profile Image
    Rehan_F
    Answered on February 09, 2021 at 07:22 AM

    Greetings,

    I've been doing testing on a clone of your form and the issue seems to be caused due to the Old Default Theme you are currently using.

    I've applied your form stylings in the cloned form and it seems to be working properly.

    https://form.jotform.com/210392662560958

    Here is you can clone it.

    https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    Should you need further assistance then please let us know.

    Thanks

  • Profile Image
    Flourens_Pierre
    Answered on February 09, 2021 at 08:04 AM

    hello

    thanks for your help

    I spotted 2 problems I can't work out with your form (see below)

    1612875825_6022883199d4b_


    1)next/ back button should be one above the other

    2)when you select an option, the whole block turns white


    can't work out how to change it


    can you please help?


    cheers

  • Profile Image
    Flourens_Pierre
    Answered on February 09, 2021 at 08:10 AM

    1612876184_60228998063c0_


    In any case, I can't duplicate your form alas!

  • Profile Image
    Kenneth_C
    Answered on February 09, 2021 at 09:02 AM

    Hi there,

    I have now disabled the "Prevent Cloning" option on the form.

    You may now clone it from your end.

    Best.

  • Profile Image
    Flourens_Pierre
    Answered on February 09, 2021 at 10:54 AM

    Thanks kenneth


    what about the 2 other problems?


    1612875825_6022883199d4b_


    1)next/ back button should be one above the other

    2)when you select an option, the whole block turns white


    thanks

  • Profile Image
    Jimmy_D
    Answered on February 09, 2021 at 12:55 PM

    Hi there!

    Kindly inject the CSS code below to your form to remove the white background and the shadow.

    .form-line-active{
        background-color:transparent!important;
    }
    .form-line-active input:focus{
        box-shadow: none;
    }

    I notice the next and back buttons are already stacked on mobile, do you wish to align them like this on larger screen as well?

    1612893187_6022cc03d6140_

  • Profile Image
    Flourens_Pierre
    Answered on February 09, 2021 at 02:23 PM

    Hello,


    on the new form, the buttons are not stacked. Please see this form: https://form.jotform.com/210394082342348


    thanks for your help

  • Profile Image
    Jimmy_D
    Answered on February 09, 2021 at 03:58 PM

    Kindly use the CSS code below to stack the Next and Back button on the form.-

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


    li[data-type=control_pagebreak] .form-pagebreak {
        -ms-flex-wrap: nowrap;


        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


    .jf-form-buttons:not(.form-pagebreak-back) {
       margin-left: 0px
    }


    .form-pagebreak-back-container {
         margin-right:0
    }


    .form-buttons-wrapper, .form-submit-clear-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        
    }


    .form-all .form-submit-button{
        margin-top: 10px;
    }
    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container, .form-all .form-submit-button{
        width: 100%!important;
    }
    }
    .form-line-error {
        background-color: transparent!important;
    }


    1612904296_6022f76857318_

    Let us know if you need further assistance.

  • Profile Image
    Flourens_Pierre
    Answered on February 10, 2021 at 04:53 AM

    It works really good for mobile but the full screen version is overlapping on the right

    1612950792_6023ad08ce65b_

    how can I fix it?

    thanks a lot for the help!

  • Profile Image
    ashwin_d
    Answered on February 10, 2021 at 05:34 AM

    I have injected the following custom CSS code in your form and that seems to have fixed the issue:

    @media screen and (min-width: 600px){

    .form-pagebreak-next-container {

      margin-right: 50px !important;

    }

    }

    Please test your form again and get back to us if the issue persists.

    We will wait for your response.