What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Date Fields Not Right Size - RESOLVED

    Asked by AA_C on December 08, 2016 at 10:42 PM

    Hi,

    On my form 63423134202946, I have a current date field.

    I wanted it to display DD, MM, YYYY but the last field is so small it won't fit the 2016 so I'm displaying YYYY, MM. DD.

    I tried to inject some css for the fields but I'm not getting it right.

    Also I would actually like to display; DD MMM YYYY.

    So how do I adjust field sizes and get the format I want?

    (Note: To get the DD to fit I set the padding to -5)

    Regards
    Robert
    AAC

     

     

  • Profile Image

    Answered by irfanmoosani on December 09, 2016 at 12:51 AM

    Add the following code in the CUSTOM CSS section

    #year_216 {

        width : 100pt;

        size : 8pt;

    }

     

    #month_216 {

        width : 100pt;

        size : 8pt;

    }

     

    #day_216 {

        width : 100pt;

        size : 8pt;

    }

     

    This is how the form should appear after the CSS is applied .
    You can adjust the width of the field as per your requirement by changing the value of width:100pt to say width:75pt; or width:60pt; etc

  • Profile Image

    Answered by irfanmoosani on December 09, 2016 at 01:06 AM

    I also noticed the following code in the INJECT CSS section

    #id_"year_216" {

        width : 10pt;

        size : 8pt;

    }

    You can remove this code safely

  • Profile Image
    JotForm Support

    Answered by emily on December 09, 2016 at 02:39 AM

    Hi Robert, 

    If the solution provided by irfanmoosani does not work for you, please inject the custom CSS codes to your form. 

    First, go to the settings of DateTime field and then set DD-MM-YYYY as Date Format. 


    Kindly inject the CSS codes below.

    span.form-sub-label-container {

        width : 50px !important;

    }

    #first_197 {

        width : 100% !important;

    }

    #last_197 {

        width : 100% !important;

     

    }

    Please have a look at the user guide about injecting Custom CSS Codes

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

    I hope these help. If your problem still persists or you have any question, please let us know.

    Thank you.

  • Profile Image

    Answered by AA_C on December 09, 2016 at 08:56 AM

    Hi All;

    Thanks for all the input. Much appreciated.

    This is what I injected;

     

    #day_216, #month_216, #year_216 {

     size : 12pt;

    text-align: center;

    color:black;

    font-weight:bold;

    }

    #day_216, #month_216 {

        width : 40pt;    

    }

    #year_216 {

        width : 80pt;   

    }

     

    Works just as I wanted it to, to a point...

    This may be a second thread although the css code above may have to change somewhat.

     

    Spell the month out with 3 letters or complete word.

    8 Dec. 2016 or 8 December 2016

    What is the injected code to accomplish this please?

     

    Thanks to all of you!

    Regards
    Robert
    AAC

  • Profile Image
    JotForm Support

    Answered by emily on December 09, 2016 at 09:05 AM

    Hi Robert, 

    I am moving your question to another thread. It will be answered in the URL below.

    https://www.jotform.com/answers/1007696 

    Thank you.