Hello everyone, I have this CSS issue, I have a button option, and I would like it to be behind my popup. I have multiple popups
within the form. How can I change the following variable?Thank you.
Hello Christian,
Thank you for your well explained question.
To override the --osui-popup-layer variable,
:root {
--osui-popup-layer: 250;
}
Or instead of 250 whatever you want to set the z-index to. I should mention, this could have unintended consequences, so instead you may want to adjust the z-index of the BEH class.
Now this may not resolve your issue due to opacity. The setting of opacity has an impact on z-index: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
A neat hack may be to set a slight opacity on the buttons when they are in this scenario. eg
.the-button-class.with-popup {
opacity: 0.95;
You probably don't need this, but for anyone else reading, here is a link to z-index documentation.
I hope this helps!
Kind regards,
Stuart
Hello Cristian,
Did you tried like this:
Create the class .MyClass on your theme like this:
.MyClass.popupbackdrop {
z-index: 300;
Just apply the same to your div/widget.
Best Regards
Hi Cristian Angel Puma Villalva,
The z-index property specifies the stack order of an element.
Popup-backdrop {
Z-index:500;
give the z-index value wherever you have created you this class. very first change the z-index value from developer too only the change the value in you existing class.
hope this can work if not plz share the OML
Kind regards