Microflow Call Confirmation Pop-up

Hi everyone, I have absolutely no idea why the pop-up confirmation for a microflow call button appears at the bottom of my screen instead of the center. Refer to the image below: I’d end up having to drag the Confirmation to the center and click “Proceed” to continue and trigger the microflow. I initially suspected it could be because of the page size being too long but I couldn’t replicate this issue on a test project either. I am using Mendix Studio Pro 8.12.1 Any help would be much appreciated. Thank you. Regards Kevin
6 answers

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

.mx-dialog {

    top: 20px!important;

    position: fixed;

    left: auto;

    right: auto;

    padding: 0;

    width: 500px;

    margin: 0;



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:

  1. copy the _modals.scss partial from core > widgets and paste it into your app folder.
  2. @import it into app > _custom.scss.
  3. Open the  copied _modals.scss partial and at the bottom of the page paste the following code:
top: 20px!important;

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.





Hey Russell,

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.

Best Regards