What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Designder styled Dropdown displaying 2 arrows

    Asked by gesturepoke on April 24, 2017 at 05: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?

    Screenshot
  • Profile Image

    Answered by Ian 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.

     

  • Profile Image

    Answered by gesturepoke 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.

  • Profile Image

    Answered by Ian 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

    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

  • Profile Image

    Answered by gesturepoke on April 25, 2017 at 01: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:

     

    And another part of the same form:

     

     

    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.

  • Profile Image
    JotForm Support

    Answered by Mike on April 25, 2017 at 05: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:

  • Profile Image

    Answered by gesturepoke on April 25, 2017 at 05: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.