Z-index for ATC button

Resolved neelmodi
(@neelmodi)

1 year ago

Hi all

On this page, when the add to calendar button is hovered over and opens downward, it tucks in behind the div below it. I’ve tried various stylesheet overrides for .atcb-dropdown .atcb-active with z-index at 99999, but nothing worked.

Any help on identifying the element class I need to tag to have a higher z-index on the button?

Thanks!

Neel

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Contributor Jens Kuerschner
(@jekuer)

1 year ago
Hi there,

The z-index has no effect here. Each row at your page is generating its own scope. So, you would need to rework your template.

Alternatively, you can add the attribute “forceOverlay”. This renders the list differently – costs some more performance at the user’s browser and not as smooth, but always on top.

Or you make the list always open to the top with listStyle=”dropup-static”.
- This reply was modified 1 year ago by Jens Kuerschner.
Thread Starter neelmodi
(@neelmodi)

1 year ago

Thanks Jens.

I’m still confused about which div I should use. I’m using the Avada theme, so I don’t have access to the code directly, but I can add custom CSS for the DIV in question. Just not sure which DIV that is. Could you inspect the page and tell me?

Much thanks

Neel

Plugin Contributor Jens Kuerschner
(@jekuer)

1 year ago

Needed to update my answer. Should be clearer now.

Actually, this element of your theme is adding a lot of things that prevent an element from a prior block to overlay the next one.
As mentioned, I would rather try to go for another ATCB setup (like the forceOverlay or listStyle options). If this is no option, you would need to add a lot of work to tweaking the template.

Thread Starter neelmodi
(@neelmodi)

1 year ago

Hmmm, I’m unsure what you mean by other ATCB options. I’m using the free version, so I’m limited to these options, I guess:

Configuration | Free Add to Calendar Button

Plugin Contributor Jens Kuerschner
(@jekuer)

1 year ago

Yes, but you can configure it in a way the list does not sit on the following event block. Or use the forceOverlay option.

Simply put this in the “other attributes” box (when using the Gutenberg block) or the shortcode.

Thread Starter neelmodi
(@neelmodi)

1 year ago

Brilliant! I added forceOverlay to the shortcode and it worked!

Thanks so much!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Z-index for ATC button’ is closed to new replies.

Tags