Tired of small dialogs in Dynamics 365 CRM? Try this fix

These days we are used to work with big resolutions. With all this real state, why do we settle with these small dialogs in Dynamics 365

Wouldn’t it be nice to seize all this windows space, specially for lookup dialogs?

Recently, a customer approached us regarding this issue… it was really difficult for them to search for contacts when creating marketing lists by using this small dialogs.

So, by using an out-of-the-box approach, as one of my colleagues calls it, we installed a browser extension which allows you to change the styling of a webpage, including the resize of dialogs and pop-ups.

This open source extension is called Stylus. It’s available for all major browsers such as Chrome, Firefox, and Opera. For Edge, there is an alternative called TamperMoney ( it might not be needed ).

Finding the dialog

We need to know exactly which dialog is the one that needs growing. For this, we can use the developer tools of your browser of choice ( Press Ctrl+Shift+I in Chrome or Firefox for example ). From there, we’ll proceed to search for the HTML element which holds the dialog. Click the selector and start hovering the page until the whole dialog gets selected:

To aid in the selection you can start clicking the elements in the Elements window until you find the match.

As you can see, in Dynamics 365, these dialogs are actually Iframes and the element holding it is called InlineDialog. With a couple of CSS changes, we can fix this dialog in no time.

Here comes the extension

Now that we have our target, it’s time to install the extension. Once it’s done, click on it to view it’s options and then click Manage to create our own script.

At the options page, click on “Write new style”.

Then, follow these steps to create a style for our Dynamics instance:

1. Give your script a name, for example, Big dialogs.
2. Paste the supplied code.
3. Press the plus sign to specify the URL of your Dynamics instance. It’s best if you select the “URLs starting with” option and then paste the main url, for example, https://<yourtenant>.crm4.dynamics.com.
4. Hit save and close this window.

#InlineDialog {
    top: 5% !important;
    left: 5% !important;
    height: 90% !important;
    width: 90% !important;
}

Now you should see the extension icon reflecting the changes you’ve made:

Refresh your Dynamics page, and enjoy your new dialog space 😊

This technique is helpful not only for solving issues like this but also to override the style of popular webpages to suit your style.

Head to userstyles.org to enjoy some great scripts made by the community.