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.
