Skip to Content (Press Enter)
UserImage.jpg
Michiel Peters
288Views
5Comments
Solved
Popup re-center when device orientation changes
Question
Usability
I'm using the default pop-up in Outsystems and the problem I found is that when the orientation of a device changes the pop-up doesn't recenter. I set the property of recenter to true, but that's only on ajax refresh.

Anyone found a solution for this problem?

(not only with change of orientation, but on resize as well)
1
0
20 May 2016
Copy Link
2019-09-17 09-11-00
João Pedro Abreu
Staff
Solution
I had this problem and worked around it by adding a few lines of javascript that run when the popup content is ready:

/* Make the popup always centered */
$(window.parent).on("resize", function() {
    window.parent.$(".os-internal-ui-dialog").css({ "top": "50%", "left": "50%", "-webkit-transform": "translate(-50%, -50%)", "transform": "translate(-50%, -50%)" });
});

In my case, I just wanted a single popup to always have this behavior, so I didn't really care that this wasn't written as a fix for the Popup Editor itself, but it would be nice if the popup already did this by default.
 
1
0
20 Jun 2016
Copy Link
UserImage.jpg
Michiel Peters
João Pedro Abreu wrote:
I had this problem and worked around it by adding a few lines of javascript that run when the popup content is ready:

/* Make the popup always centered */
$(window.parent).on("resize", function() {
    window.parent.$(".os-internal-ui-dialog").css({ "top": "50%", "left": "50%", "-webkit-transform": "translate(-50%, -50%)", "transform": "translate(-50%, -50%)" });
});

In my case, I just wanted a single popup to always have this behavior, so I didn't really care that this wasn't written as a fix for the Popup Editor itself, but it would be nice if the popup already did this by default.
 
Thanks for the answer. This is of course a little bit costly but a nice solution.
This will only happen on resize, did you change the default styling as well in the css for the initial state?
 
0
0
20 Jun 2016
Copy Link
2019-09-17 09-11-00
João Pedro Abreu
Staff
I didn't change the initial styling because it was working well enough for me. Since the popup only needed realigning when the screen was resized or the orientantion changed, the code I posted was enough.
0
0
20 Jun 2016
Copy Link
UserImage.jpg
Michiel Peters
Was looking at it all wrong, I thought you were setting with end height as well. But I'll mark it as answer.

Thanks again!
0
0
21 Jun 2016
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.