Font Size in the "Dates Difference" widget

  • Profile Image
    jdhoustonforms
    Asked on June 03, 2019 at 03:55 PM

    I'm trying to reduce the size of the label fonts in the "Dates Difference" widget using the CSS code editor. I need help with the code... nothing I've used has worked. 


    Please help, thank you.  

    Screenshot
  • Profile Image
    Kevin_G
    Answered on June 03, 2019 at 06:34 PM

    Try injecting this CSS code to the widget: 

    .date-input {

        font-size: 5px;

        padding: 6px !important;

    }

    You can change the font-size value with another one you want, this guide will help you injecting the code to your form: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    I hope this helps. 

  • Profile Image
    jdhoustonforms
    Answered on June 03, 2019 at 07:43 PM
    PERFECT. Thank you.
    I would have lost 5 years off my life trying to figure that out.
    ...
  • Profile Image
    jdhoustonforms
    Answered on June 03, 2019 at 07:43 PM
    Also, is there a way to include a calendar avatar out to the side of the field using the Date Difference widget-- like below?
    [cid:image003.jpg@01D51A3E.03E32510]
    ...
  • Profile Image
    Kevin_G
    Answered on June 03, 2019 at 09:14 PM

    You may try with the following code which will add a calendar icon: 

    .date-container li::before {

        content: url("https://cdn.jotfor.ms/images/calendar.png");

    }

    The guide given before will help you injecting this to the widget. 

    You may also replace the image with your own image providing the URL.