MSCRM 2013 Tip to Prevent The Gap Growth When Minimizing CRM Window Width

CRM 2013 new form layouts prefers 3 column tabs with 1 column sections over the CRM 2011 1 column tab with 2 column sections. The nice thing about this new layout is that as you resize the browsers window the containing sections will arrange themselves to fit cleanly within the window. This is typical behaviour of floating elements. So for example as you shrink the size of a window a tab with 3 horizontal sections will start to stack on each other vertically. While creating a few custom entities I noticed a slight rendering problem when resizing the CRM’s window. The gap between the final field is a section and the next tab would increase. Take a look at the screen shots below.

Full size window where all 3 sections fit horizontally within the tab

The image is cropped but notice the gap between Owner and Tab 1.


Small width window where all 3 sections fit vertically within the tab

Notice how in this screen shot the gap between Owner and Tab 1 has increased!


Whats happening here is that the sections that don’t actually contain fields still have a defined height. So, as these sections stack on top of each other the gap between the last field and the next tab appears to grow. Unfortunately you cannot simply remove the sections that don’t contain any fields as they are used as tab fillers. ┬áThe simple solution to tidy this up is to customise the form and set each section that contains no fields to not be visible by default. Once published the sections still exists but have no defined height. This means that as the browser window width is reduced the gap between the last field and the next section stays the same. The screen shot below shows a small width window where the blank sections aren’t visible. Notice the gap between Owner and Tab 1, its back to normal!