How to adjust the font size of the DateSingle Widget textbox?

  • cjh
    Asked on April 10, 2017 at 8:52 AM

    HI,

    I had tried several different CSS codes to change the font size for just one field but no luck.

    Below is one sample I had used but no luck.

    .form-description-content
    {
           font-size: 12px;
    }

     

    What am I missing?

    Thanks,

    Carl

     

  • Sven
    Replied on April 10, 2017 at 9:54 AM

    You can refer to the field by the ID, and add your custom CSS to it, also, make sure you use !important, as it helps overwrite the existing styling and take your new added CSS. 

    Example:

    .form-description-content
    {
           font-size: 12px !important;
    }

    For more info on how to get the field's ID, please refer to this link:

    How to find field IDs and names

     

    Thank you.

  • cjh
    Replied on April 10, 2017 at 10:44 AM
    Still not working for me.
    I have included a screen grab attached.
    It is the bottom “Time Stamp” field.
    I want it to be very small and out of the way for end users.
    Thanks,
    Carl J. Haffner
    Mobile Media Manager
    Shareholder
    Cenveo Publisher Services
    2005 City Line Road Suite 300
    Bethlehem, PA 18017
    t. +1.610.554.3723
    e. Carl.haffner@cenveo.com
    w. http://www.cenveopublisherservices.com/mobile-apps
    Check out our app: https://appsto.re/us/oNkP-.I
    Resources can be found here.
    Need a quote click here.
    ...
  • Support_Management Jotform Support
    Replied on April 10, 2017 at 12:07 PM

    Hello Carl, looks like you replied through email and attached an image. Our Forum doesn't accept attachments. You'd have to post the image right on your thread https://www.jotform.com/answers/1115434

    Related guide: How-to-add-screenshots-images-to-questions-in-support-forum 

    Also, is this the form you're currently working on 62337430810145?

    If it is, the Time Stamp field you're referring to is a DateTime Single widget. To target the text inside the input textbox, use the following CSS Codes instead:

    #cal {

        font-size: 10px;

    }

    How to adjust the font size of the DateSingle Widget textbox? Image 1 Screenshot 30

    Result:

    How to adjust the font size of the DateSingle Widget textbox? Image 2 Screenshot 41

    Feel free to adjust the value in px upon your discretion.

  • cjh
    Replied on April 10, 2017 at 1:44 PM
    Hi,
    Yes that is the one.
    What would be the CSS to include the words Time Stamp also?
    Thanks,
    Carl J. Haffner
    Mobile Media Manager
    Shareholder
    Cenveo Publisher Services
    2005 City Line Road Suite 300
    Bethlehem, PA 18017
    t. +1.610.554.3723
    e. Carl.haffner@cenveo.com
    w. http://www.cenveopublisherservices.com/mobile-apps
    Check out our app: https://appsto.re/us/oNkP-.I
    Resources can be found here.
    Need a quote click here.
    ...
  • David JotForm Support
    Replied on April 10, 2017 at 1:59 PM

    For the label sizing, add the CSS to the form, rather than to the field CSS:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #label_13 {
         font-size: 10px;
    }

    Here is how the form would look with the label enabled and set to 10px font size:

    https://form.jotformpro.com/70995002952964

  • cjh
    Replied on April 10, 2017 at 2:45 PM
    Thanks!
    Carl J. Haffner
    Mobile Media Manager
    Shareholder
    Cenveo Publisher Services
    2005 City Line Road Suite 300
    Bethlehem, PA 18017
    t. +1.610.554.3723
    e. Carl.haffner@cenveo.com
    w. http://www.cenveopublisherservices.com/mobile-apps
    Check out our app: https://appsto.re/us/oNkP-.I
    Resources can be found here.
    Need a quote click here.
    ...