Date Picker: the date/time fields were not fitting within the form width and expanded extensively horizontally.

  • Profile Image
    kristinemusaraca
    Asked on March 21, 2018 at 05:02 AM
    We wanted to revert because the date/time fields were not fitting within the form width and expanded extensively horizontally. That is another issue we have not been able to identify and correct. This is growing increasingly aggravating.
  • Profile Image
    gizem
    Answered on March 21, 2018 at 07:30 AM

    I cloned your form and tested it. You can see my test with this steps in the below screencast:

    - I cut all your custom CSS code.

    - I set 'Default' theme first. Then, I set 'Big' theme that you used.

    - Finally, I pasted your custom CSS again.The problem is fixed partially.

    15216306871.gif

    The result of my test:

    15216319242.gif

    I can suggest you check out your CSS code carefully since it can change the appearance of themes.

    Let us know how it goes.

  • Profile Image
    kristinemusaraca
    Answered on March 21, 2018 at 09:11 AM

    Hi, gizem. In the videos you provided, the form still looks much more narrow than it did previously, and the buttons (attach/submit) do not look like they did on Monday. There are input fields with inexplicably rounded corners. I verified the designer is set to 'straight' or angular, not rounded, and also scoured the CSS for "border-radius". No results were yielded, so why is it rounding the corners? The date/time picker field still looks different/not how we had it previously. They would all fit on one row, of equal height, no round corners.

  • Profile Image
    kristinemusaraca
    Answered on March 21, 2018 at 11:37 AM

    I also tried the cut/view and paste/view to see the difference. The date/time field was stretched even without the CSS, leading me to believe the CSS is not the issue.

  • Profile Image
    gizem
    Answered on March 21, 2018 at 12:12 PM

    Sorry for the inconvenience again. After the cloning your form, you can try these suggestions
     on your clone form. So, you can test easily on the clone form.

    - I just recloned your form. Changing to the default theme and re-setting to your theme solved the date picker field's problem.

    - Firstly, copy your CSS code.

    - Change the theme to the default theme and re-set to your theme.

    - Add your CSS code again since it is deleted when the theme is changed.

    - Update the form style properties as seen in the below.

    - Add your logo again since it is deleted when the theme is changed.

    About the form width; when I changed the theme that you used on my clone form, it seems the form width is set as default. You can change your form style properties according to your current properties:

    1521645152Screen Shot 2018-03-21 at 6.12


    Somehow, there are some different CSS codes on your theme. It could be conflicted any other theme if you used before. You can add this custom CSS code to your form to be able to have not rounded corners.

    .form-all .form-textbox, .form-all .form-radio-other-input, .form-all .form-checkbox-other-input, .form-all .form-captcha input, .form-all .form-spinner input, .form-all .form-pagebreak-back, .form-all .form-pagebreak-next, .form-all .qq-upload-button, .form-all .form-error-message{

      border-radius: 0px !important;


    }

    I hope this helps.

  • Profile Image
    kristinemusaraca
    Answered on March 21, 2018 at 12:26 PM

    Did you create this clone? The date/time is still stretched.

    https://form.jotform.com/80789029493167

  • Profile Image
    Nik_C
    Answered on March 21, 2018 at 01:56 PM

    I will consult our colleague regarding your inquiry.

    We'll get back to you shortly.

    Thank you!

  • Profile Image
    gizem
    Answered on March 22, 2018 at 03:32 AM

    After I cloned your form, I applied steps that I mentioned above.

    You can clone my form and test it yourself. There are still some style conflicts on the form. When I delete your custom CSS, they are arranged according to the theme.

    Please check it out. You may want to change some of your CSS code if necessary.

    I can confirm that date picker problem is resolved in my form.

    https://form.jotform.com/80794933423968

    You can clone my form by following this guide: How to Clone an Existing Form from a URL

  • Profile Image
    kristinemusaraca
    Answered on March 22, 2018 at 09:51 AM

    While the date/time picker looks fine, the logo is gone, as I mentioned in my original support question. I will try what you said and get back to you if the issues continue, which I suspect they will, given that the radio buttons are totally misaligned in your form - another issue I was having when I stripped our CSS.

  • Profile Image
    kristinemusaraca
    Answered on March 22, 2018 at 09:53 AM

    Your clone link is https://form.jotform.com/80794933423968

    Your clone form shows this:

    15217267892018-03-22_8-52-14.png

  • Profile Image
    ashwin_d
    Answered on March 22, 2018 at 11:20 AM

    I have cloned your form and working on the custom css code to align form fields.

    I will get back to you on this soon. 

  • Profile Image
    ashwin_d
    Answered on March 22, 2018 at 11:35 AM

    Please take a look at the following cloned form where I have injected custom css code to fix the field alignment and logo issue:  https://form.jotform.com/80804579313964

    Please test this form and get back to us if you need any other changes.

  • Profile Image
    kristinemusaraca
    Answered on March 22, 2018 at 11:58 AM

    Why is the radio button's header text aligned with each option and not the radio buttons? We still have the original look, which is much cleaner, in the actual form. Can you please reference that? Our CSS is the same on related forms, and we have not had issues with those. We will most likely delete this one since your team cannot seem to identify why this ONE form is being distorted by your designer.

    Your clone form looks like this: 

    15217340952018-03-22_10-50-53.png


    Every other field is styled differently than the other - it looks sloppy. If our CSS isn't in this clone and was determined "at fault" for the date/time picker, then why are the fields still messed up? Your clone form:

    15217342432018-03-22_10-55-59.png


    Our ORIGINAL form's radio buttons present as such and also have uniform field sizes:

    15217342822018-03-22_10-53-46.png


    Please advise.

  • Profile Image
    ashwin_d
    Answered on March 22, 2018 at 01:28 PM

    Okay please take a look at the following cloned form where I have fixed the issues you have reported:  https://form.jotform.com/80804579313964

    Please check and get back to us if you need any other changes.