Trouble with CSS for Configurable List dropdowns (formatting to match default style)

  • Profile Image
    BoatyardBee
    Asked on February 06, 2018 at 03:29 PM

    Hello, I'm having trouble applying custom CSS to a Configurable List widget. I'm able to make it work in someone else's form and a clone of it by modifying the CSS rendering in Chrome as below, as well as simply 'select' as seen in the attached screenshot (form from this thread):

    input[type=button], input[type=text], select, textarea {border-radius: 0px}

    My form does not appear to make the same elements available. Unfortunately, the clone does not allow any CSS injection anywhere in the form builder or widget.

    I have not been able to find in your documentation or user forum a comprehensive list of elements and classes in the Configurable List stylesheet.

    Specifically, I would like to format a dropdown field so it matches the default form style. I'm using the date type, and I need a month and year. In my live form you can see the attempted workaround with regular jotform spinners, but it does not work out so well visually. I am not doing any calculations so text fields would be fine in this case, but since there are two fields within one question (date: month, year), that solution does not work.

    I'm hoping there's an easy fix, thanks for looking into this issue!

  • Profile Image
    Victoria_K
    Answered on February 06, 2018 at 06:09 PM

    I have cloned your form for testing and it seems that your comments in the code field were causing the issue:

    1517958424screencast2.gif

    Please delete unnesessary code to fix the styling. 

    1517958497Screenshot_10.png


    Hope this helps! 

    Let us know if you need further assistance.

  • Profile Image
    BoatyardBee
    Answered on February 10, 2018 at 09:49 AM

    Hi Victoria, thanks for your reply! Unfortunately this does not work. I actually added the comments just for you, after I had tried everything I could think of.

  • Profile Image
    Victoria_K
    Answered on February 10, 2018 at 10:01 AM

    I still think that there was a typo mistake at your first section of code. 

    I can see now that you have solved it! 

    1518274920Screenshot_46.png

    And I forgot to give you the link to my test form.

    Here it is:

    https://form.jotform.com/80403982118960

    Feel free to clone it for closer checking.

    How-to-Clone-an-Existing-Form-from-a-URL

     

    If you need further help with your forms, just let us know.

  • Profile Image
    Ardian_L
    Answered on February 19, 2018 at 05:46 AM

    Seems that the issue is occurred on MAC only. Please use this CSS code instead:

    select {

      -webkit-appearance: none !important;

      -webkit-border-radius: 0px !important;

    }

    Let us know if you have any other question. Thank you!

  • Profile Image
    Jan
    Answered on February 21, 2018 at 08:22 PM

    Thank you for sharing the solution. I am sure this will be helpful for other users.

    Glad to know that your issue is now resolved. If you need any help, please do not hesitate to contact us.