JotForm V4>>Widgets Custom CSS Area: quotes are not reading properly.

  • Profile Image
    allstarvacationhomes
    Asked on January 20, 2017 at 06:25 PM

    I am using the font Open Sans on my form, but I am having trouble when declaring the font-family in the DateTime Single calendar widget CSS. The quotes in "Open Sans" are converted to " after I save my CSS changes.

    For example, I type this into the custom CSS box in the widget:

     

    input {

      font-family: "Open Sans", Arial, sans-serif;

    }

     

    but after saving, the widget converts this to:

     

    input {

      font-family: "Open Sans", Arial, sans-serif;

    }

     

    I have tried single and double quotes around the font name, and the widget doesn't seem to allow them in the CSS. Is there a way to fix this?

  • Profile Image
    Jim_R
    Answered on January 21, 2017 at 03:02 AM

    You should import the Font first before you can use it on the Custom CSS section of the widget.

    Just append this line right at the top:

    @import url(http://fonts.googleapis.com/css?family=Open+Sans);

    Then use single quotes when declaring the font-family:

    font-family: 'Open Sans', sans-serif;

    Seeing that you managed to heavily customize the widget with CSS, I'll just assume you know where/how to make these changes.

    RESULT:

  • Profile Image
    allstarvacationhomes
    Answered on January 24, 2017 at 09:36 AM

    Whether I use single or double quotes, the quotes are converted, and the style isn't read correctly. The @import line does not make a difference. I input single quotes around the font name, and the result is:

    font-family: 'Open Sans', sans-serif;

    I think there is a bug with widgets reading quotes in custom CSS.

  • Profile Image
    BDAVID
    Answered on January 24, 2017 at 11:34 AM

    You are correct, there is a bug with the widget reading the quotes in custom CSS:

    \

    I have reported this to our back-end team. You will be updated via this thread when it gets fixed.

  • Profile Image
    ceren
    Answered on January 26, 2017 at 09:35 AM

    Hello allstarvacationhomes,

    Encoding problem related with custom css of widgets is fixed now. We're sorry for inconveniences.

    If you have any other questions please let us know.

  • Profile Image
    allstarvacationhomes
    Answered on January 26, 2017 at 07:06 PM

    It hasn't been fixed. The quotes show properly in the custom CSS module, but the CSS is still not implemented correctly. If I look at the CSS through developer tools, I can see that the quotes are still not read properly. The font-family is the last line in the attached screenshot.

  • Profile Image
    BDAVID
    Answered on January 26, 2017 at 09:06 PM

    Thanks for updating us. I have forwarded your findings t our developer. You will be notified via this thread when it gets fixed.