search

add2cal / add-to-calendar-button

Reliably create beautiful Add to Calendar Buttons, where people can add events to their calendars. Without the hustle and unsupported cases.
https://add-to-calendar-button.com
Other
1.36k stars 114 forks source link

[Bug]: Overlay Z-index #442

Closed TrendyTim closed 1 year ago

TrendyTim commented 1 year ago

What happened?

The modal overlay shows under a vue modal dialog (not

but a vue component using div and css).

How to reproduce?

When placing the atc button on a vue modal dialog, it gets hidden behind the dialog, the dialog has a huge z-index due to some things beyond our control.

Is there any chance we can get an insanely high z-index or ability to specify overlay z-index in the styles.

Screenshots & more

I tried fighting the shadow root for a while to no avail, if i try to affect the z-index of the overlay with .actb-light {z-index: 999999999999999999999999999} i also have to change the position as well, which breaks the position of the button itself (though oddly only on load if i set css after load it didnt seem to be a problem, but thats not a viable trick unfortunately).

To get me to a deployable state i had to modify the CSS in the js file which is not even close to less than ideal.

System & Environment

Edge/Chrome/Firefox

jekuer commented 1 year ago

Hi @TrendyTim ,

Is there any chance to have a Stackblitz (or similar) or URL to see the problem "in action"? Otherwise, it is quite hard to debug. The modal gets put at the very end of the HTML body, in its own relative ShadowDOM, which would re-scope the whole z-index-thing. Not sure how this dialog interferes here. I know of some quite new settings that can force an dialog to always be on top, not matter other elements. If a higher z-index really helps, it would be even more interesting to be able to reproduce it.

Regarding CSS - you could always use the customCSS option to simply specify your own css file. See section "load an external css file" at https://add-to-calendar-button.com/advanced-use#case-1

TrendyTim commented 1 year ago

I was able to replicate it in a simple codepen for you, the steps are not 100% how it would happen for me, but i havent figured out why it generally works (as one expects with the shadow dom) but not on my page, however i would expect the underlying mechanism to be the same (possibly some other vue interaction on my offending page triggers the same behaviour).

https://codepen.io/TrendyTim/pen/mdKWVaE

Just make sure you edit the html a bit first to make sure codepen won't reload the page on css edit, the steps are documented in the pen.

I don't know if its a bug in ATC somehow or a bug in firefox and chrome shadow dom or just odd behaviour, but it drove me crazy for hours.

And I confirmed changing the z-index in the source fixes it (pasted the modified .min.js version in the JS area on this one) https://codepen.io/TrendyTim/pen/JjeqYzj.

I had considered the custom css option, but I wasn't keen on having to maintain the separate css across updates (as well larger page resources), and the related security PITA requirements.

jekuer commented 1 year ago

Thank you!

Wow - this is ... unexpected. Will investigate it a little bit more. Your solution works, but still hoping there's a more stable option.

TrendyTim commented 1 year ago

Damn, I was hoping you'd tell me I was an idiot and the solution was obvious.

Thanks, hope you can find something.

jekuer commented 1 year ago

No. But I found a good solution by giving its own stacking scope to the host element. Fix will be coming soon.

TrendyTim commented 1 year ago

You're an absolute legend, thanks.

jekuer commented 1 year ago

@TrendyTim , should be (hopefully) resolved with v2.3.2 - please have a look. If you are using React: The React wrapper has not been upgraded yet - waiting on your results before doing this (unless you use it - then I would trigger the update there asap).