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

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.

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

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

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:

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.

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.

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

Both on Chrome and Edge browsers.

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.

Thanks Zahra

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

Please add the following CSS in the form:

.form-sub-label-container{

  flex:1 !important;

}

Complete Guide: How to Inject Custom CSS Codes 

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

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)?

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.

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

Hello HighlandsTheatre_HTG,

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

Thanks for your patience and understanding.

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