You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Setting opacity with CSS interferes with save as draft functionality

Forms
Updated October 10, 2019
posted on August 30, 2019

I found something odd today, where CSS caused interference with the save as draft feature. Usually I would expect this to happen only with Javascript. If you change the opacity of the cf-formwrap div, it causes the save as draft button to load an extra div with the class model-backdrop that covers the entire screen and blocks any further progress.

Here is the CSS modification

and here is the new div that is created when clicking the save as draft button

In short, do not change the opacity of the form wrap, or you will not be able to save as draft because this extra object is huge and in the way of everything.

1 0
replied on October 10, 2019

Did you ever find a solution to this? We are seeing the same thing with Signature fields.

0 0
replied on October 10, 2019

I used a background color with an alpha instead, if you want everything to be slightly see through you would have to apply this to each individual element, but usually just the cf-formwrap div is good enough.

0 0
replied on September 3, 2019 • Show version history

This kind of smells like an issue with Bootstrap. The div that you reference, with modal-backdrop, is the dark background that Bootstrap puts behind it's modal dialog. Even though the z-index isn't changing, it's possible that by touching cf-formwrap, you're causing some kind of bug to surface. I can duplicate the issue, but I can't see an obvious reason why it's happening.

EDIT: I've had this kind of thing happen before in Bootstrap. It's never been the same cause twice. Here's an example, albeit a bit old. 

Out of curiosity, what effect are you hoping to achieve by setting the opacity?

0 0
replied on September 3, 2019

Oh its not anything very important. It is just something I do with forms that have a repeating pattern for a background or an image for a background. For some reason if you have this type of background the form looks odd to me, the hard cut from background to form makes it look like a 90's website. A slight opacity on all elements softens the form a bit and blends the background.

I was just surprised to find that this was the cause for an extra layer (or a change in index?). It should only ever change the opacity of an element with that class, never move objects around.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...