Advance Designer: phantom CSS formatting when saving

Everytime I go to Custom CSS to try to adjust my Form Calculation widget, the entire width gets messed up.

I realized, all I have to do is literally got o Advanced section in CSS and Save WITHOUT DOING ANYTHING and the formatting and width gets messed up.

What can i do? I wanto make ID 1289 and ID 1291 smaller width, centered and larger font but anything in custom CSS is literally killing the whoel formatting.

Hi Tim,

Thanks for reaching out to Jotform Support. I understand that when you access the Custom CSS section in your form, the width of the Form Calculation widget appears to be affected.

Could you please share a screen recording of what’s happening so we can look into it in more detail and better understand the issue? It would also be helpful if you could highlight the specific Form Calculation widget where you want to apply the CSS code.

You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us.

Once we hear back from you, we'll be able to move forward with a solution.

Hi,

Back to my first issue. I could really use your help so I can make these changes without ruining the whole form.

VIDEO #1: https://vimeo.com/1100858999?share=copy#t=0

This is a video of what I am doing when I go into the Advanced Options of CSS on this form. In this video, I basically do NOTHING except save after entering the section.

VIDEO #2: https://vimeo.com/1100859272?share=copy#t=0

This is a video of the before/after of how the form looks on my phone: (On the computer it still looks fine)

VIDEO #2: https://vimeo.com/1100859272?share=copy#t=0

PICTURE BELOW:
See the picture below: All the buttons are now cut off on the side. Before I went into the CSS section. Everything was fine.

I have tried some of the fixes online but they aren't getting it back to everything fitting as it was before I saved in the CSS section.

Please help. I need to make these updates and use this form soon.

Hi Tim,

I cloned your form and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results:

Since it's working perfectly on my end, can you try clearing your browser's cache and see how it goes? I also optimized the form's performance by clearing the cache.

Give it a try and let us know if you have any other questions.

#ISSUE #1: You are cloning one of the forms that is working.

Clone this form: https://form.jotform.com/251923848616163

This is one where I didn't even add code, but I just saved in the CSS Advanced and stopped formatting correctly BUT ONLY ON THE PHONE. On the computer it is fine but we are 90% using this on the phone.

Please advise.

ISSUE #2: the question that turns into just a small purple box. I see that this works on my safari browser but it is still now working on CHROME. I cleared the cache and still isn't showing up.

Any other suggestions?

Hi Tim,

Regarding issue #1, I was able to replicate the issue on my initial assessment. But, I'll need more time to look into it a bit more to determine the next course of action. I'll get back to you as soon as I can.

As for issue #2, I created a new thread for it here. We will attend to it shortly.

In the meantime, let us know if you have any other questions.

Thank you. I await your direction on how to proceed to fix the issues.

Hi Tim,

I tested using a cloned of your form, and I was able to replicate the same issue along with other issue as well. From my initial assessment, it appears to be due to the number of elements, and widgets in the form. For now, I suggest not using the Advanced Designer CSS tool if not really needed. You can use the inject custom CSS tool in the Form Designer instead, and the CSS you added will work just fine.

The screencast below shows the issue of most of the widgets not rendering properly on the form due to performance issues:

I've created a ticket and escalated this to our Developers. Although we don't know exactly when it'll be fixed, we’ll circle back to this thread when we have an update.

Thanks for your patience and understanding, we appreciate it.