Hide the Year Dropdown on Configurable List Widget on MOBILE?

  • Profile Image
    IceMelt
    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:

    http://www.summitrotaryevents.com/enter-ice-melt-contest

    Original form:

    https://form.jotform.com/60177084526154

     

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

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

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

    1522869404Confirgurable-List-Cutoff-Mobi

  • Profile Image
    Jed_C
    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:

    1522875327mobile_view.png

    Let us know if you need further help.

  • Profile Image
    IceMelt
    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!

    http://www.summitrotaryevents.com/enter-ice-melt-contest

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

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

    How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

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

    1522884251zzz 2018-04-05 07.23.26.png