jQuery.Gantt not rendering as expected

Question

I'm trying to use the jQuery.Gantt plugin with IkiWiki. My code has created the following HTML fragment:

<script src="./jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#meetings").gantt({"minScale":"months","scale":"weeks","maxScale":"days","source":[{"desc":"Meetings","name":"meetings","values":[{"from":"/Date(1381834800000)/","label":"meeting/20131015 gs progress","to":"/Date(1381831200000)/"}]}],"navigate":"scroll"});});</script>

which should render one event on my chart. I've also copied all the CSS from the project's style.css into my CSS.

The page on which this chart renders is being served up by Apache running locally.

The problem I'm getting is that it renders like this:

PNG

The calendar display is not right:

• I'm not sure how the months are supposed to be displayed;
• there's a grid which I think is supposed to be further down.

One good thing is that my event is actually displayed.

I'm not sure how to proceed with debugging this.

Answer 1

Consider checking the current, min and max scale for your gantt in the initialization object. That can be changed using the scaling buttons on the gantt chart as well.

To debug, I would gladly suggest the Firebug browser plugin

jQuery.Gantt is a cool plugin, but doesn't work well for sub-scale events. Anything rendered will always fill at least one grid, and be rounded to the nearest grid insert. That's why your meeting fills a full day from the pic.

Answer 2

I think it is because Jquery Gantt is not compatible with Twitter Bootstrap 3. In this example, they use v2.3.2

Answer 3

As Darwin said, your problem is related to how Bootstrap resets the CSS for the page.

The stylesheet that comes with Bootstrap 3.0 "helpfully" resets the box-sizing CSS property for every single element on the page to be border-box, whereas the plugin you're using expects content-box, which is indeed the default box model. This messes with how the plugin sizes different elements on the page, resulting in what you're seeing.

The solution and workaround are both in the tracker for the plugin itself: https://github.com/taitems/jQuery.Gantt/issues/102 .