Layer of the "success banner" is displayed under "button"

Dear,

Please check the attachment. You’ll see a page with a form & a button. When I send the form, a banner is displayed with success information. However, this banner should be the top layer but it’s not the case. If you hover on the button, you’ll see that the button is over the banner layer. Can you fix this?

Thanks

Attachments:

You must be logged in to view attached files.

Hi,

Try to add z-index-10 to the column extra class field in witch your contact form is placed (https://prnt.sc/ritwli).

Kind Regards

Dear,

The problem is actually worst than what I thought & described. Please check the video in private, you’ll see that the success banner is displayed totally in a wrong way. It’s not normal at all that some elements from the body AND footer are displayed above the success banner.

I will not start putting z-index setting to each and every element. This is a general issue. Please fix this problem.

Thanks

Hi,

The following issue is related to the position: fixed; value browser rendering when the fixed HTML element is placed under another. Unfortunately, this browser behavior is cant be changed globally via theme.

But since sticky form notice HTML is located in the contact form element (you can check that by removing notice position: fixed; via chrome devtools https://gyazo.com/9a4cfbf723d299558dd8583fde888f1c) all that you need is to add z-index-10 class to the contact form column to make that column z-index layer (along with sticky contact notice inside of it) over other columns.

You don’t need to add z-index to other columns or elements. The custom class needs to be added only to the column in witch sticky notice is placed (https://gyazo.com/67af99f2bdd6fd04cd0f86cf826d6893).

Regards

Dear,

The answer is not sufficient. First, my test was on the success message (and not the warning error message) but anyway it applies to both even if the outcome is different from both banners.

Second, the warning message that you mention already has a z-index of 10. So I just don’t understand what I’m supposed to add since it has it already and it isn’t working still. See private video.

Thanks

Warning and success notices have similar layout styles so the type of this notice is didn’t matter for testing purposes.

z-index: 10 styles you referring is added to the column inner (.vc_column-inner) witch is not affects column (.vc_column_container). As was indicated in the previous reply custom class needs to be added only to the column (.vc_column_container) in witch sticky notice is placed (https://gyazo.com/67af99f2bdd6fd04cd0f86cf826d6893).

Regards

Dear,

I made a video in private section. Can you confirm that the steps I did are good?

Thanks

As was suggested in the following reply try to add z-index-10 to the column extra class field in witch your contact form is placed (https://prnt.sc/ritwli).

Regards

I found it, it works great now

You can close this ticket, thanks

[Author]

Posts