SharePoint Gantt Chart Hidden with Bootstrap Master Page

SharePoint provides a Gantt chart web part that allows small teams to manage their projects. When using the default master pages, the web part renders with no problem.  In the cases when a custom Bootstrap master page is used, the right side panel of the Gantt grid does not display properly as shown on the image below:

By taking a look at the problem, we notice that Bootstrap uses the following CSS rule:

* {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; }

This causes the chart to not display properly because there is a CSS rule on the Gantt chart that sets a border on the date header. We can key on that element rule to override the Bootstrap style by adding the following to our custom CSS file that is loaded from the master page.

/*find inline style with the border rule at the end. */ div[style$="border: 1px solid rgb(171, 171, 171);"] {     -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;     box-sizing: content-box; }

We want to override the rule just for that specific element and not affect other layout elements.  We have to use this selector because the server side controllers create dynamic ids on the elements, and we want to prevent this problem in any page where this web part is used.

The solution was to find inline styles set with a border to use a box-sizing content-box instead of border-box. This prevents the hidden behavior on the Gantt chart. After the change, our page should look like this:

Hope you can now see the chart.

Originally published by ozkary.com