Date Fields Not Right Size - RESOLVED

  • Profile Image
    AA_C
    Asked 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
    irfanmoosani
    Answered 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
    irfanmoosani
    Answered 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
    emily
    Answered 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
    AA_C
    Answered 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
    emily
    Answered 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.