Time Element - Selecting "Duration Indicator" forces field to squash up to the left

  • Profile Image
    HighlandsTheatre_HTG
    Asked on January 27, 2021 at 04:46 AM

    Hi There,

    The time element is displaying fine until I select "duration indicator" which then forces the entirety of that field to the left of the form meaning the data cannot be seen in the time fields. This is the default time element and not edited.

    The way it displays in the form builder (see attached images) is the same both in the builder and the form window.

  • Profile Image
    Richie_P
    Answered on January 27, 2021 at 05:50 AM

    I have checked your form in both mobile and on desktop view, it seems the form doesn't force the fields to the left.

    1611744571_6011453bcdb91_1.png

    Can you please view your form again and let us know how it goes?

  • Profile Image
    Richie_P
    Answered on January 27, 2021 at 06:59 AM

    Answered by HighlandsTheatre_HTG

    Thanks Richie,

    I just double checked across preview and a second browser (Edge) as well as on my phone. I can confirm my phone/phone preview mode is showing the same as you posted, however Tablet mode and Desktop mode in preview and independently are showing the following:

    1611745981_60114abdf2955_Jotform_Squashe

    So I can confirm what I'm seeing is consistent across Tablet/Desktop Preview Mode, Form open in a new tab on the Chrome Browser and copied link on the Edge Browser (which I rarely use so should have no cache issues).

    Interestingly, the squashing behaviour of the time element was identical when I was assisting a friend of mine create a similar form layout. In this case, I was assisting him at his place using his account and his computer (I'm on PC using Chrome vs his iMac using Firefox). In both cases, the squashing only occurs when selecting duration indicator. Unselecting it returns the time and AM/PM fields to a full readable width.

    Thankyou for your assistance.

    I have checked your form but I can't replicate the issue using edge.

    1611748508_6011549c1c444_1.png

    Can you please try viewing the form using the its Form URL https://form.jotform.com/210261819561049?

    I have also cleared your form cache.

    Let us know how it goes.

  • Profile Image
    HighlandsTheatre_HTG
    Answered on January 27, 2021 at 05:20 PM

    Unfortunately, still seeing the same thing via the form URL:

    1611785938_6011e6d252815_Jotform_Squashe

    Both on Chrome and Edge browsers.

  • Profile Image
    Zahra_S
    Answered on January 27, 2021 at 10:44 PM

    I was able to replicate the issue on my end in Chrome, Firefox, and Edge.

    Please allow me some time to find a solution for you. I will get back to you soon.

  • Profile Image
    HighlandsTheatre_HTG
    Answered on January 28, 2021 at 02:55 AM

    Thanks Zahra

  • Profile Image
    Zahra_S
    Answered on January 29, 2021 at 09:13 PM

    Apologies for the delay.

    I cloned your form and tested it on my end. I was able to fix the issue with CSS.

    Here's my cloned form: https://form.jotform.com/210268627042956

    1611972303_6014becff1e14_function-room-b

    Please add the following CSS in the form:

    .form-sub-label-container{

      flex:1 !important;

    }

    1611972663_6014c0370f4b1_

    Complete Guide: How to Inject Custom CSS Codes 

    I hope this helps. Please let us know if you need further assistance.

  • Profile Image
    HighlandsTheatre_HTG
    Answered on January 29, 2021 at 09:58 PM

    That's perfect, thanks Zahra! Glad to know I wasn't doing something wrong. Richie had me a little baffled as to what was going on my end when he wasn't able to replicate the problem.

    Just to check, is this an interim fix that may become obsolete with a coding change (if so will that require the deletion of the CSS code at some point in the future)?

  • Profile Image
    Zahra_S
    Answered on January 29, 2021 at 11:08 PM

    You're welcome. I am glad it worked for you. It can sometimes happen that we are not able to replicate the issue because of a different version of the browser or different device.

    Yes, this is an interim fix and will not work if CSS is removed from the form at some point. Thank you for raising this point. I am forwarding this to our developer team so they can make a permanent fix in the backend. You will be notified on this thread about any changes.

    Feel free to contact us if you need further assistance.

  • Profile Image
    HighlandsTheatre_HTG
    Answered on January 29, 2021 at 11:22 PM

    Fantastic, thanks Zahra. Sincerely appreciate yours and Richie's assistance.

  • Profile Image
    ivy
    Answered on February 01, 2021 at 06:41 AM

    Hello HighlandsTheatre_HTG,

    We are sorry for the inconvenience this may have caused. The problem is resolved now.

    Thanks for your patience and understanding.

  • Profile Image
    HighlandsTheatre_HTG
    Answered on February 02, 2021 at 07:17 PM

    No problems, thanks Ivy. Sincerely appreciate the quick support and update!!