What is the correct way to style the Dates Difference widget input fields? Experiencing unpredictable widget behavior.

  • BoatyardBee
    Asked on July 3, 2018 at 11:48 PM

    Hi, I'm attempting to style the Dates Difference widget input fields to match the rest of my form. I'm having trouble affecting the box shadow, border radius, and the width of the field frame. When I update the widget CSS it appears correctly, but reverts to the default style in the live form. Can you tell me how I should be doing this? Other changes do appear, so I don't believe it's a browser cache issue.

    I'm also experiencing other unpredictable behavior with the widget: duplicated fields will disappear in the live form, and some changes will not update after being saved, including the date format. Right now I'm unable to enter slashes in the field, and the date format is stuck at yyyy-mm-dd. I've deleted it and started over, and I get different results each time.

    It would be great to have a guide that provides the elements of each widget, as well as how they can or can't be used with other Jotform features. It's helpful to have such a variety of tools, but it can be a little frustrating trying to figure out which field type or widget to use for a certain calculation or behavior. I hope this is something that can be worked into the product. If it is something you think is a good candidate for a priority feel free to make a new thread for the suggestion. Thanks!
  • Kiran Support Team Lead
    Replied on July 4, 2018 at 2:28 AM

    I have checked your JotForm and see that the widget seems to be displaying correctly on the form.

    However, on the first page the calendar is cut off due to the width of the widget is lesser than the calendar width. Please try changing the width of the field from the properties to 275 so that the calendar should be displayed properly.

    153068539204072018 11434223 Screenshot 10

    Also, the date format seems to be displaying as set in the widget settings. Were you able to fix the issue? If you still need any further assistance or referring to something different, please let us know. It would be also helpful if you can provide us with a screenshot of the issue.

    The other question related to guide for the widget elements is moved to a separate thread and shall be addressed there shortly. Please follow the link below:

    https://www.jotform.com/answers/1515609-

    Thanks!

  • BoatyardBee
    Replied on July 5, 2018 at 8:31 PM

    Thank you! I was thinking the width in the field editor would expand the entire frame.

    Yes, the border radius and shadow did start working after I sent my question, and now the font size is as well. Unfortunately the date format has not. The first image below is what it looks like in the form editor, and although I'd prefer the fields to be side-by-side, it basically looks the way I want it to.1530835874DatePickerEditor Screenshot 10

    Here's how it looks for me in the live form.

    1530835886DatePickerDDMMYY Screenshot 21

    What I have in the widget CSS is this, hopefully some of which is redundant:

    input[type=text], textarea {

        margin-left: 0;

        font-size:14px;

        border: 1px 1px 1px 1px solid #ccc;

        -moz-box-shadow: 0 1px 2px #eee inset;

        -webkit-box-shadow: 0 1px 2px #eee inset;

        box-shadow: 0 1px 2px #eee inset;

       -webkit-border-radius: 2px; !important;

        border-radius: 0 !important;

        max-width: 125px;

    }

    #start.date-input.hasdatepicker {

        -webkit-border-radius: 2px; !important;

        border-radius: 0 !important;

        font-size:14px;}

    .date-input.hasdatepicker {

    border-radius: 0 !important;

    max-width:100px;

    font-size:14px;}

    Can you tell me which is correct?

    I'm also not sure why when the form is reloaded it appears like this, but it's not a big deal.1530836501DatePickerDaysDefault Screenshot 32

    Thanks again!

  • John_Benson
    Replied on July 5, 2018 at 10:10 PM

    Please check the image below:

    Just to confirm, do you want the Start Date and End Date to be side by side?

    1530842853526vxy6 Screenshot 10

    Or do you want the Date Window to move beside the Start Date and End Date?

    153084302954cz56 Screenshot 21

    If not, please provide more details so we can assist you properly. Thank you.

  • BoatyardBee
    Replied on July 6, 2018 at 11:21 AM

    When I mentioned I would prefer they be side by side I was referring to the Start Date and End Date fields, yes, not the pop-up calendar.
  • John_Benson
    Replied on July 6, 2018 at 12:41 PM

    We will continue working on your request to a new thread to avoid confusion. Here's a new thread: https://www.jotform.com/answers/1517916

    Thank you. 

  • BoatyardBee
    Replied on July 6, 2018 at 11:37 PM

    Thank you for your quick response! I'll reply in the new thread. Can you address the date format issue? I'm still seeing DD-MM-YYY.

  • Adrian
    Replied on July 7, 2018 at 6:04 AM

    Currently, the date format is set to dd/mm/yy in your widget and that is how it appears in the live form as well.

    What is the correct way to style the Dates Difference widget input fields? Experiencing unpredictable widget behavior.  Image 10

    What is the correct way to style the Dates Difference widget input fields? Experiencing unpredictable widget behavior.  Image 21

    If you want to show the date as mm/dd/yy, make sure to select that format in the widget settings.

    DEMO (mm/dd/yyyy): https://form.jotform.com/81872645651969