Too much whitespace on Dynamics 365 v9 forms–workaround!

I was frustrated with the amount of whitespace on the new v9 D365 CE forms so I started doing some research. Using the Chrome browsers DevTools (press F12), I was able to identify the style I wanted to modify:

TABLE.ms-crm-FormSection td

This style adds 10px of padding to the top and bottom of all form elements.

I found a nice bit of JavaScript code that uses appendChild() to insert a modified style into the Head of the document. It seemed to work…for about a day, then the form seemed to go back to the previous rendering. Having some (not much) experience with styles, I know that that styles can be affected by many things, including the order they are loaded, and I have no patience for diving in any deeper. Instead I found a nice workaround: stylebot. This is an extension to Chrome that allows me to define my own styles for any given domain. After adding the extension, navigate to CRM (or refresh your page if you are already there), then click on the “css” icon in the top-right corner and choose Open Stylebot to get here:

in the field that says  “Select an Element” type in

TABLE.ms-crm-FormSection td

The domain name should appear directly under it. Click the Advanced button, and enter the style code:

padding-top: 0px;
padding-bottom: 0px;

then click the “x” to close stylebot and refresh your page. Now the whitespace is gone! Hope this makes you day a bit better.