Finally I was able to made this work by overriding mx-dialog from mxui.scss in the custom css and cleared the cache. This is the full style I put in the custom .scss
In order to adjust the position of the pop up you will need to update some CSS in the Atlas UI framework. Here is some documentation on how to get set up to do that: https://docs.mendix.com/howto/front-end/atlas-ui & https://docs.mendix.com/howto/front-end/calypso. If your completely new to styling with Mendix I’d recommend you read through at least modules 1- 5 of https://gettingstarted.mendixcloud.com/link/path/105/Style-your-App-with-CSS
As Hari mentioned the top property is way off so here is how you can do that:
Note: Typically I wouldn’t recommend using !important, but because the styles are being applied inline you have to use it so that your styles will be taken.
Did you or anyone on your team change the ‘position:fixed' property of .mx-dialog in your stylesheets?
Not that I know of. This is from the main.css :
Certain popups would also be completely off-screen so you can’t even drag it to the center. So the workaround we had to take is zoom out on the browser then we can see it and drag it appropriately.
We are also facing the same issues after migrating to 12.1, I found why issue is coming, if you check the model pop up, there is an inline style with a top: 700 px, when I checked in 8.9 this inline style only use top:20 px. However, I am not able to figure out from where this inline style is injected.
I’ve done what you recommended but unfortunately it still does not work. Am I missing something? Is there by any chance something that I need to do beforehand ?
You may refer to the image below to see how I did it in case I may have missed something out.
Below is the screenshot of how it still looks :
Look forward to hearing back from you again soon.