This is a quick tip post. I am facing this problem myself quite often when working with Nintex for Office 365, especially in “Classic forms”. Sometimes, when you click the “preview” icon, the dialog window pops up, covers the designer with an overlay and… freezes. How to solve it?

There are number of possible reasons: issues with the connectivity, error in the custom scripts, browser issues etc.. The point is, that whenever this happens, designer is actually not able to close the dialog as the close icon is disabled:

Furthermore, the designer is covered with an overlay, that prevents creator from clicking anywhere outside the dialog. In the end, this situation is quite uncomfortable, or even frustrating, since it is not possible to restore usage of the designer without refreshing the whole page. And this is risky, because most possibly you are not saving your progress before each click on the “Preview” button, right?

How to solve it?

Developer tools to the rescue! Click “F12” (or “CTRL”+”SHIFT”+”I”) in your browser or try to find them under “More tools” (check how to do it in your browser here).

Once developer console is opened, navigate to “Elements” (1) tab and there click the icon with mouse cursor (2):

Next, hover with your mouse over the opened dialog window and click. This should select DOM element being part of the structure that the whole dialog window is built from:

Now navigate up in the structure to the “DIV” having class “nd-dialog-panel” and “style” attribute containing “display:block”. Click on it (1) and then simply hit “Del” button on your keyboard, or right-click to open menu and then “Delete element” (2) – no worries, you are not removing anything permanently 🙂

Hint: you can make it as well a bit faster if you know how to use Developer tools. Simply search for the “DIV” element having class “nd-dialog-panel” and display:block, and remove it with no additional steps 😉

What’s next?

Now you are able again to for example click “Save” button on the ribbon, export the form or publish it. However, since you have removed the whole DOM structure required by the “Preview” dialog window, you won’t be able to trigger preview again. To do that, you need to refresh the designer window. That’s it!

I hope you find this short tip useful and that it will save you lots of frustration as it does for me.