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

  • Profile Image
    ZEXEZ
    Asked on June 04, 2020 at 04:19 PM

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


  • Profile Image
    Bert_A
    Answered on June 04, 2020 at 09:16 PM

    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.


  • Profile Image
    ZEXEZ
    Answered on June 05, 2020 at 12:07 AM

    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?

  • Profile Image
    ashwin_d
    Answered on June 05, 2020 at 04:11 AM

    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.

  • Profile Image
    ZEXEZ
    Answered on June 05, 2020 at 03:20 PM

    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?

  • Profile Image
    Bert_A
    Answered on June 05, 2020 at 05:14 PM

    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.