Hide the Year Dropdown on Configurable List Widget on MOBILE?

  • Profile Image
    Asked on April 04, 2018 at 03:11 PM

    I saw a post on how to hide the year dropdown by injecting the code below to the Custom CSS section of configurable list. 

    select.y {

    display: none;


    This works on the desktop view of the form, However, this doesn't seem to work for the mobile view, it still shows the year dropdown. How can we fix? Here is the form with the date dropdowns for 1, 5 or 10 guesses where we want to hide the year so that it all fits on mobile displays. Right now, you can't seem the Temp guessing field on mobile.

    Here is the page it is on where the temp fields are getting cut off on the right:


    Original form:



    Is there anyway to make it more mobile friendly? See screenshot.

  • Profile Image
    Answered on April 04, 2018 at 03:17 PM

    Here's a marked screenshot to see what you better what I mean.


  • Profile Image
    Answered on April 04, 2018 at 04:47 PM

    Try making the widget in vertical view instead of horizontal. Please copy the CSS code in this guide here https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive and inject the mobile responsive code in each of your configurable widget CSS code.

    Vertical mobile view:


    Let us know if you need further help.

  • Profile Image
    Answered on April 04, 2018 at 05:23 PM

    I've inserted the code, but it doesn't seem to refresh or change on mobile... but, now it shows up as vertical in desktop, which is not preferred. Is there a way to make it show up vertically on mobile and horizontal on desktops? Is there something else I need to do? 

    Thanks for your help!


  • Profile Image
    Answered on April 04, 2018 at 07:24 PM

    I suggest you also review the steps provided in the user guide:


    Add the @media query code also for the mobile responsive browser to work.

    1522884251zzz 2018-04-05 07.23.26.png