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

  • Profile Image
    BoatyardBee
    Asked on July 03, 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!
  • Profile Image
    Kiran
    Answered on July 04, 2018 at 02: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.png

    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!

  • Profile Image
    BoatyardBee
    Answered on July 05, 2018 at 08: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.png

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

    1530835886DatePickerDDMMYY.png

    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.png

    Thanks again!

  • Profile Image
    John_Benson
    Answered on July 05, 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.png

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

    153084302954cz56.png

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

  • Profile Image
    BoatyardBee
    Answered on July 06, 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.
  • Profile Image
    John_Benson
    Answered on July 06, 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. 

  • Profile Image
    BoatyardBee
    Answered on July 06, 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.

  • Profile Image
    Adrian
    Answered on July 07, 2018 at 06: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.

    15309577742.png

    1530957789123.png

    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