What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Any Way To Set A Drop-Down Widget Width Limit On Mobile

    Asked by allstarvacationhomes on January 24, 2017 at 07:26 PM

    I have a multi-select checkbox-in-dropdown widget on a form. When I select several choices on mobile (I'm testing on an iPhone), the result stretches the drop-down box wider than the page. On the desktop, the dropdown works fine with the overflow text being replaced with ellipses. Is there any way to get the same behaviour on mobile?

     

     

    Page URL:
    https://form.jotform.com/70023852668155

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 24, 2017 at 11:30 PM


    I was able to reproduce the problem.

    You can set a width limit of that widget when viewed on mobile so it does not expand infinitely.

    Use this:

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

    #dropdown{

    max-width:400px;

    }

    }

    Inject this in the Custom CSS section on that widget wizard

    Result:

    Hope this helps!

  • Profile Image

    Answered by allstarvacationhomes on January 25, 2017 at 09:22 AM

    I don't want to use a fixed pixel dimension because that's not fully responsive. If I use the code you provided and a user has their phone turned sideways in landscape mode, the dropdown will not be 100% width like the rest of the fields on my form. Using something like max-width:100%; doesn't seem to work either.

    If I make my browser window on my desktop small, there is no problem. There is only an issue when viewed on an actual mobile device. Any other options?

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 25, 2017 at 10:50 AM

    I tested your form in my phone and I didn't notice any problem, the drop-down field is showing fully on the screen in both portrait and landscape mode:

    Which phone you used when you experienced the problem?

    Thank you!

  • Profile Image

    Answered by allstarvacationhomes on January 25, 2017 at 02:24 PM

    I'm using an iPhone 7 Plus. I'm including a screenshot below to show how the box expands if several items are selected.

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 25, 2017 at 02:35 PM

    Thank you for additional information provided.

    I'll have to investigate this issue a bit more and will get back to you.

    Thank you for your patience!

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 26, 2017 at 05:28 AM

    Thank you for your patience.

    Please try pasting the below CSS in your Custom CSS Field:

    @media only screen 

    and (min-device-width : 450px) 

    and (max-device-width : 1080px) 

    and (orientation : landscape)

    {

    max-width:400px;

    }

    I didn't have iPhone 7 plus on my hands, so please test and let us know if it worked for you.

    Thank you!

  • Profile Image

    Answered by allstarvacationhomes on January 26, 2017 at 07:42 PM

    No, the code you provided does not work. It doesn't even make sense that it would work.

    Again, I do not want to use fixed pixel dimensions. It is not responsive. I want the dropdown to remain 100% width at all sizes on all devices, regardless of what choices are selected in the dropdown.

    I really wish JotForm would just have the ability to input percentage widths (especially 100%) when building forms to prevent even having to fix it all with CSS.

    I tried doing this with width:100% and max-width:100%. I can get it to work on desktop at all sizes, but it breaks on mobile when several choices are selected.

    I also am not sure if the best place to target this width issue is within the widget CSS or in the overall custom CSS. I can't seem to get anything to work within the widget itself, so I am targeting the .custom-field-frame in the main custom CSS.

    Is there any other approach to this issue?

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 26, 2017 at 11:09 PM

    I am currently investigating your form to see if there are other alternative codes we can use for your requirement. I will get back to you once I am done checking. Thank you.

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 27, 2017 at 01:06 AM

    After checking further, unfortunately I was not able to setup an alternative to prevent the box from expanding. With this in mind, I have now raised this issue to our backend team so that the issue with the widget on iPhone can be fixed. We cannot provide an exact date, but we will let you know on this thread once we have any news. Thank you.