Custom div class inside field labels are no longer working

  • Profile Image
    FloridaDreamHomes
    Asked on December 28, 2016 at 02:02 PM

    A recent update has resulted in our page not displaying correctly. Before, we were utilizing:

    4pm unless noted below

    In order to change the size and font details. However, just recently, We noticed that rather than changing the text, it now displays the

    text and later. Break tags still work though. Here is the link to the preview of the form.

    https://form.jotform.com/60646355309155

    Hopefully it is just a quick fix.

  • Profile Image
    Welvin
    Answered on December 28, 2016 at 02:27 PM

    We've released a new patch to increase the level of our security and this is one of the few that have been affected. I'm sorry, but I don't think our developers will consider reverting the patch. A workaround would be to move the texts as your

    A workaround would be to move the texts as your sub label or hover text.

  • Profile Image
    FloridaDreamHomes
    Answered on December 28, 2016 at 02:39 PM

    Thank you for your prompt response.

    I was able to do this with several fields, however, there are three fields I have that do not have sub label options. They need to be displayed, and not just as a hovertext.

     

    Two datetime fields, and one Text Area. I welcome any more suggestions.

     

  • Profile Image
    Mike_G
    Answered on December 28, 2016 at 03:53 PM

    I have checked your form and I see that these are the fields shown in the image below.

    I would suggest you remove the extra HTML codes you added after the field label of the fields shown in the image above

    and add the CSS codes below to your form

    label#label_37:after {

        content: "4pm unless noted below " !important;

        font-size: 15px !important;

        color: #34495e !important;

        display: block !important;

    }

    label#label_38:after {

        content: "10am unless noted below ";

        font-size: 15px !important;

        color: #34495e !important;

        display: block !important;

    }

    label#label_29:after {

        content: "If amount is zero, please note if the guest is a relative, meaning no taxes required.";

        font-size: 15px !important;

        color: #34495e !important;

        display: block !important;

    }

    It should look like this after:

    I hope this helps. If you need any further assistance regarding this, please feel free to let us know and we will be glad to help you.

    Thank you.

  • Profile Image
    FloridaDreamHomes
    Answered on December 28, 2016 at 04:19 PM

    Thank you for your help! that worked almost perfectly. The only slight issue is that because the size is set statically, on it doesn't adjust for smaller screen sizes, but it still works well enough.

  • Profile Image
    Mike_G
    Answered on December 28, 2016 at 05:02 PM

    We're glad that it worked for you.

    With regards to the font-size of the added texts through CSS, I just thought that you would like to have a specific font-size set to it since I saw from your previous codes that you included this:

    div.mini, span.mini {

        font-size : 15px;

    }

    Can you provide us more details of what you're trying to achieve when your form is viewed from smaller screen sizes so we can try to work on it for you, please?

    Thank you.

  • Profile Image
    FloridaDreamHomes
    Answered on December 28, 2016 at 05:20 PM

    I just want the text sizes to scale with the rest of the document, when viewed on a mobile device. It is fine the way it is now, though. Thanks for your dedication.