CODEWITHSUNDEEP
javascriptcssextjsjiragantt-chart
Jaanus
Jaanus

Reputation: 16541

Having css troubles with adding Gantt chart as JIRA report

I am using this library for Gantt:

http://www.bryntum.com/examples/gantt-latest/examples/basic/basic.html

When I implement it as JIRA report, the left bar in JIRA gets moved to middle.

Images are for illustrative purposes only.

I researched and found the problem was in Gantt library CSS file:

http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css

Don't try to understand it, it has 10000 lines after beautifying the code. But after debugging I found the solution. When removing this code, the JIRA left bar moved to left and everything looked fine:

.x-border-box,.x-border-box * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

Except:

enter image description hereImages are for illustrative purposes only.

The footer moved on top of the Gantt Chart. So having the second option is better, but I still prefer having my footer down below.

I tried changing CSS values, but could not produce any other results, than these two shown on screenshots.

So all in all, how do I get the footer down and the JIRA bar to left.

Upvotes: 1

Views: 475

Answers (1)

Mats Bryntse
Mats Bryntse

Reputation: 564

The problem is that the Ext JS CSS is global on the page, conflicting with other elements. This post might help, and helps set the 'scope' of the CSS to any element on the page - like your Gantt chart container div etc.

How to scope the reset CSS so that is applied to Ext components using scopeResetCSS property?

Use:

Ext = {buildSettings: {scopeResetCSS: true}};

together with ext-all-scoped.css. Should do it.

Upvotes: 1

Related Questions