Slick Dropdown not mobile responsive

  • Profile Image
    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?

  • Profile Image
    JohnRex
    Answered on August 14, 2019 at 02: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.

  • Profile Image
    plungefetish1
    Answered on August 15, 2019 at 04:43 PM

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

  • Profile Image
    JohnRex
    Answered on August 15, 2019 at 04: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.

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 08:50 AM

    Have you had a chance to look at this?


  • Profile Image
    Richie_P
    Answered on August 16, 2019 at 09: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;

    }

    The custom CSS code would work for both widgets.

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

  • Profile Image
    plungefetish1
    Answered 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.

  • Profile Image
    Richie_P
    Answered 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.

  • Profile Image
    plungefetish1
    Answered 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.PNG

  • Profile Image
    plungefetish1
    Answered on August 16, 2019 at 07:36 PM

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

  • Profile Image
    JohnRex
    Answered on August 16, 2019 at 07: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.png

    Here's how it looks on mobile:

    1565999969as2.png

  • Profile Image
    plungefetish1
    Answered on August 20, 2019 at 06: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

  • Profile Image
    AshtonP
    Answered on August 20, 2019 at 08: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