Date Fields Not Right Size - RESOLVED

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

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

I also noticed the following code in the INJECT CSS section

#id_"year_216" {

    width : 10pt;

    size : 8pt;

}

You can remove this code safely

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.

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.

Thanks to all of you!

Regards
Robert
AAC

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.