Slick Dropdown not mobile responsive

  • plungefetish1
    Asked on August 14, 2019 at 12:53 PM

    When I view my form https://www.jotform.com/build/91707648718166 on a mobile phone in portrait view my DDslick widgets ( Unique names: airTrans  and PayOps ) extend past the right edge of the screen.  

    How can I adjust them so that they will stay within the screen?

  • John Support Team Lead
    Replied on August 14, 2019 at 2:29 PM

    You can try adjusting its width by injecting a custom CSS code. Could you please try using this code below and see if this resolves the issue?

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

    .dd-options,.dd-select,.dd-selected{

    width:250px!important;

    }

    }

    Please follow this guide on How-to-Inject-Custom-CSS-Codes.

  • plungefetish1
    Replied on August 15, 2019 at 4:43 PM

    That did not work. I  injected the css but it still does the same thing

  • John Support Team Lead
    Replied on August 15, 2019 at 4:48 PM

    Let me have some time to run a few tests with your form so I could figure out the right CSS code to use. I will get back to you on this thread shortly.

  • plungefetish1
    Replied on August 16, 2019 at 8:50 AM

    Have you had a chance to look at this?


  • Richie JotForm Support
    Replied on August 16, 2019 at 9:19 AM

    Kindly add this custom CSS inside your ddSlick Dropdown widget custom CSS

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

    .dd-options,.dd-select,.dd-selected{

    width:270px!important;

    }

    Slick Dropdown not mobile responsive Image 1 Screenshot 20

    The custom CSS code would work for both widgets.

    Please give it a try and let us know if the issue still remains.

  • plungefetish1
    Replied on August 16, 2019 at 10:35 AM

    It does work but it is not responsive.  It is stuck in the smaller size.   In the desk top mode I would like it to be as wide as the other elements.

  • Richie JotForm Support
    Replied on August 16, 2019 at 10:51 AM

    My apologies, it seems the media query code I have shared doesn't work that is why the size changed even if you're not using mobile.

    Kindly try this code instead:

    @media (max-width: 480px)

    {

    .dd-options,.dd-select,.dd-selected

    {

    width:250px!important;

    }
    }

    You may add this code  to your Form Designer CSS.

    Please follow this guide on How-to-Inject-Custom-CSS-Codes.

  • plungefetish1
    Replied on August 16, 2019 at 12:33 PM

    It did not work.

    I injected it into this form

    https://www.jotform.com/build/91707648718166

    and I got the same results!

    1565973213wrong again Screenshot 10

  • plungefetish1
    Replied on August 16, 2019 at 7:36 PM

    Should I start this question thread again?  my question has not been answered

  • John Support Team Lead
    Replied on August 16, 2019 at 7:56 PM

    Could you please try this code below. Inject it to both the DropDown widgets you have on the form:

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

    .dd-options,.dd-select,.dd-selected {

    width:310px!important;

    }

    1565999720as Screenshot 10

    Here's how it looks on mobile:

    1565999969as2 Screenshot 21

  • plungefetish1
    Replied on August 20, 2019 at 6:37 PM

    I still need help!

    I injected it into both ddslick widgets.  

    The Airport transfers widget works now.

     The reserve your room widget is still running off the page on my Iphone. 

    Here is the form URL   https://form.jotform.com/92263485568166

  • AshtonP
    Replied on August 20, 2019 at 8:37 PM

    Hello @plungefetish1, I can replicate the issue on my end. I am working on a custom CSS that should resolve the issue. I will get back to you soon