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

  • Profile Image
    cjh
    Asked on April 10, 2017 at 08: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

     

  • Profile Image
    Sven
    Answered on April 10, 2017 at 09: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.

  • Profile Image
    cjh
    Answered 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.
    ...
  • Profile Image
    Jim_R
    Answered 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;

    }

    Result:

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

  • Profile Image
    cjh
    Answered on April 10, 2017 at 01: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.
    ...
  • Profile Image
    david
    Answered on April 10, 2017 at 01: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

  • Profile Image
    cjh
    Answered on April 10, 2017 at 02: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.
    ...