Styling the jotform native dropdown

  • Profile Image
    livro.ca
    Asked on April 15, 2018 at 12:00 PM

    Can you help me style the jotform native dropdown to look more like the Grouped Values Dropdown. I am terrible with CSS, and the grouped values dropdown widget looks so much better on a mobile phone.

    Also, I would like to center all native dropdowns as well. Can't seem to do that either. 

  • Profile Image
    livro.ca
    Answered on April 15, 2018 at 12:02 PM

    1523808149dropdownjotform.jpg

  • Profile Image
    Adrian
    Answered on April 15, 2018 at 01:40 PM

    Let me clone your form and write the CSS needed to center the dropdown and make it look like the Grouped Values Dropdown.

    I will get back to you once I'm done.

  • Profile Image
    Adrian
    Answered on April 15, 2018 at 01:56 PM

    Cloned Form URL: https://form.jotform.com/81045725809965

    CSS:

    // dropdown

    #cid_100 {

      width: 100% !important;

      max-width: 100% !important;

    }

    [data-type="control_dropdown"] .form-input,

    [data-type="control_dropdown"] .form-input-wide {

      width: 100% !important;

      max-width: 100% !important;

    }

    select.form-dropdown {

      display: block!important;

      margin-left: auto !important;

      margin-right: auto !important;

      border: 1px solid #ccc !important;

      border-radius: 4px !important;

      cursor: pointer !important;

      font-size: 14px !important;

      height: 34px !important;

      width: 100%;

      background-color: white;

    }

    select.form-dropdown:hover {

      background-color: #eee;

    }

    @media (min-width: 400px) {

      select.form-dropdown {

        width: 300px !important;

      }

    }

    15238149611.png

    Let us know if you need further assistance.

  • Profile Image
    livro.ca
    Answered on April 15, 2018 at 05:25 PM

    Wow, great. I did my due diligence before choosing Jotform. The due diligence was the greatness of the platform first and this URL jotform.com/answers where every question is answered with thought, hard work and real honest care. I'm always so very impressed by the team of support and brains behind this amazing ecosystem. I think there's value here in taking a page from Jotform's way of business. It's great! Above and beyond. And it makes me wonder how... you manage all this. Hat's off to the founder and his team!