The multilanguage dropdown is overlapping with the Progress Bar widget

  • Profile Image
    GlobalSuccessFund
    Asked on June 01, 2017 at 09:00 AM

    Hi,

    I've created a multilingual form. I'm able to change the language using the dropdown in the desktop version, but in the mobile version the dropdown itself is not available.

    How would you suggest I change the language in mobile?

     

  • Profile Image
    amy
    Answered on June 01, 2017 at 09:59 AM

    Hi,

    When I check your form on mobile, I cannot replicate your issue. Would you please share with us the details of your device which you have used so that we can inspect it in detail? 

    We'll be awaiting for your response.

    Thank you.

    Regards.

  • Profile Image
    GlobalSuccessFund
    Answered on June 20, 2017 at 05:12 AM

    Hi Amy,

    The issue occurs when I add a progress bar to the page. The progress bar covers the language selection dropdown (since I had selected the bar to always be at the top).

    So, I had to remove the progress bar. Maybe you could replicate the issue now.

  • Profile Image
    Jim_R
    Answered on June 20, 2017 at 06:38 AM

    I see what you mean when I added a Progress Bar Widget on a cloned copy of your form. Although it's not completely hidden, the Language Dropdown still somehow overlaps with the Progress Bar at the top.

    To fix this, we can move it a bit lower using CSS. Just inject these codes to your Form Builder:

    .language-dd {

      top: 40px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    Feel free to adjust the value in px if needed. Afterwards, check the form on your mobile phone again. If it's still behind the progress bar, share with us a screenshot of how you see it from your end, along with the following:

    1. Make and model of your phone

    2. OS Version

    3. Browser you're using to test it with

    Related guide: How-to-Post-Screenshots-to-Our-Support-Forum