Form Designder styled Dropdown displaying 2 arrows

  • gesturepoke
    Asked on April 24, 2017 at 5:33 PM

    I want to customized the arrows on my dropdown menus, but when I try using the method here, I just end up with 2  arrows - like in the screenshot below - and only one of them works. In fact, this happens any time I switch from the default dropdown style.

    Does anyone know what's causing this?

    Jotform Thread 1127566 Screenshot
  • Ian
    Replied on April 24, 2017 at 10:44 PM

    Could you please specify the id of the form or the URL to access the form, so I can check further?

    I could not find the form at https://www.snaplash.com/#SECTION3

    I also checked the last edited form at http://www.jotformpro.com/form/60318197050956 but that too does not contain the field you specified in the screenshot.

     

  • gesturepoke
    Replied on April 25, 2017 at 10:25 AM

    The form from the screenshot is this one, but it does this with pretty much every form I've made.

  • Ian
    Replied on April 25, 2017 at 10:46 AM

    I could not replicate the issue at my end. I checked the form https://form.jotform.us/70865056703155 using Firefox, Safari and Chrom on Mac OS

    Here is the screenshot of what I see at my end

    Form Designder styled Dropdown displaying 2 arrows Image 1 Screenshot 20

    Let us know if we are not on the same page.

    I would also suggest you to clear the form cache and the browser cache and check again. Browser cache http://www.refreshyourcache.com/en/home/
    Form cache https://www.jotform.com/help/229-How-to-Clear-Your-Form-Cache

  • gesturepoke
    Replied on April 25, 2017 at 1:46 PM

    I cleared my form and browser caches, and now some of the dropdowns are styled differently, while others aren't.

    This is what I'm seeing after clearing my cache and trying to style the dropdown menus:

    Form Designder styled Dropdown displaying 2 arrows Image 1 Screenshot 30

     

    And another part of the same form:

     

    Form Designder styled Dropdown displaying 2 arrows Image 2 Screenshot 41

     

    Does the dropdown have to be a certain width for the styling to work? That's the only connection I can think of between the broken arrows.

  • Mike
    Replied on April 25, 2017 at 5:05 PM

    You may try removing the next CSS from your custom CSS:

    #cid_19::before {
    position : relative;
    }

    And adding the next:

    .form-dropdown {
    min-width: 150px;
    }

    Result:

    Form Designder styled Dropdown displaying 2 arrows Image 1 Screenshot 20

  • gesturepoke
    Replied on April 25, 2017 at 5:25 PM

    The "#cid_19::before" thing was something I did shortly after typing that last comment. I was trying to see if I could select the arrow and move it around. I figured it out how to do that, but I would have had to edit the position of every dropdown arrow. The min-width worked and is a lot faster. Thank you.