I'm trying to mimic the system's popup question dialog box. I have my popup looking almost exactly like the system's, but I can't get it to open in the top center like the system popup does. I've tried changing the popup-background CSS, trying negative margins and a few other things I found on this forum, but have had no success.
What am I missing here?
Thanks.
Hi @Jeff Kest
I have already added above use this css:
[data-popup-backdrop]:has(.popup-dialog-custom-yesno){
justify-content: center;
align-items: flex-start;
}
.popup-dialog.popup-dialog-custom-yesno{
margin: 0px;
Thanks
Hi @Jeff Kest ,
for targeting a single popup, not all of them, you are correct to add an extra class to it.
For the popup css itself, you can just add the class to the selector, for the backdrop you'll have to add the class using :has, as it is not the backdrop itself that has the class, but the popup, which is a child.
So, taking above example by @Rupesh Patil , it would become something like :
[data-popup-backdrop]:has(.popup-at-top){ justify-content: center; align-items: flex-start; } .popup-dialog.popup-at-top{ margin: 0px; }
Dorine
Thank you, it's effective.
@Dorine Boudry I tried this, but it's still not popping up at the top. I have the popup's style class set to "popup-dialog-yesno" and the CSS as:
Does this look correct?
Thad did the trick!
Thank You and @Dorine Boudry
You could use a Popup widget.
Refer this link:
https://outsystemsui.outsystems.com/OutsystemsUiWebsite/PatternDetail?PatternId=526
and add this CSS with parent class
[data-popup-backdrop]{
.popup-dialog{
@Rupesh Patil Thanks for solution. I am looking this effect in my project
Hi @Jeff
I created a popup as you said in the question and tried. It works.
I think this is what you wanted. For the CSS check the screen's css .
Check OML for references. Refer to the input screen in Mainflow.
Hi @Rishabh Tailor and @Rupesh Patil
I tried your solutions and it worked, sort of....
When I used "popup-backdrop" as the class, I got the popup to appear at the top of the screen, but it affected all 8 popups on that screen.
I have popup dialog class named "popup-dialog-custom-yesno" and I'm trying to name the background class ".popup-custom-yesno-backdrop", but that doesn't work. I also tried "[data-popup-custom-yesno-backdrop]" but that also didn't work.
What do I name the background class so it only affects this one popup?
Try this css:
I hope this helps you,