Trying to use custom css format on mini Date Picker Widget

  • AgilityAssoc.Canada
    Asked on November 17, 2017 at 10:59 AM

    On my test form, 73156581308963, I have 4 date fields using mini date picker widget.

    I'm trying to match the input box's appearance to match the other fields. I copied the current css code form them and pasted into custom css. This is where I'm having trouble. The input fields are named, #input_51 to _54. If I use those values the fields don't change. I inspected the fields and found class names. So I used these and still no luck.

    So here is what I have to-date;


    /* Date Widgets */
    .datepicker, .hasDatepicker > 
    #input_51, #input_52, #input_53, #input_54
    { border-width: 2px !important;
    border-style: inset !important;
    border-color: #bbbbbb !important;
    color: #585555 !important;
    padding: 4px 1px 2px 1px !important;
    background-color: #fbf4c2 !important;
    height: 22px !important;
    height: 91px !important;
    width: 80% !important;
    max-width: 320px !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    }

     Can you offer some incite please,

    Thank you, Robert

  • BJoanna
    Replied on November 17, 2017 at 12:21 PM

    All our widgets have the Custom CSS field. You should add the CSS code there. Add this CSS code to each Mini Date Picker widget:

    input#datepicker{ border-width: 2px !important;

    border-style: inset !important;

    border-color: #bbbbbb !important; 

    color: #585555 !important; 

    padding: 4px 1px 2px 1px !important;

    background-color: #fbf4c2 !important;

    height: 22px !important;

    width: 80% !important;

    max-width: 320px !important;

    -moz-box-sizing: border-box !important;

    -webkit-box-sizing: border-box !important;

    box-sizing: border-box !important;

    }

    1510938822css Screenshot 10

    The CSS code you provide has 2 height values. I removed the height: 91px !important;.

    Here is my demo form: https://form.jotform.com/73205093189963 

    Feel free to test it and clone it

    Hope this will help.

  • AgilityAssoc.Canada
    Replied on November 17, 2017 at 1:08 PM

    OK, Thank you Joanna,

    Done on 52745887899988 and looks good. Thanks for taking out height 91, it was a bit too tall :) 

    Regards, Robert 

  • BJoanna
    Replied on November 17, 2017 at 1:13 PM

    You're welcome.

    Feel free to contact us if you have any other questions.