How to align the date picker icon toward left of the field?

Is it possible to move the calendar icon to the left of the text box in the Date Picker?

Hi there,

Thank you for reaching out.

Kindly please add the following CSS to your form.

.showAutoCalendar.newDefaultTheme-dateIcon.icon-liteMode {    

position : absolute !important;   

}

#input_104_pick {

    position : absolute !important;

}

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

I hope that helps, please let me know should you need further assistance.

The CSS moves the calendar icon to the right of the field.  Can I move it to the left?  Also, is there a way to make the icon bigger?

Please delete the custom css code you injected earlier and inject the following custom css code in form to align the calendar icon to the left:

.showAutoCalendar.newDefaultTheme-dateIcon.icon-liteMode {

    margin-top: -46px;

    margin-left: -20px;

}

If you want to increase the size of the icon, please inject the following custom css code in form:

.showAutoCalendar.newDefaultTheme-dateIcon.icon-liteMode {

    margin-top: -46px;

    margin-left: -32px;

    height: 30px;

}

Hope this helps.

Do get back to us if you need any other changes.

this doesn't move it to the left, but that's ok.  I'm ok with the first CSS in this thread.  Is there a way to change the calendar icon?

Hi,

Actually, if you go under Widgets, you'll find a Date Picker similar to the basic one you're using but with different look and it has the calendar icon on the left side by default.


I hope that helps, let me know if you have further questions.