在添加甘特图作为JIRA报告时遇到css问题

Question

我正在为甘特使用这个库：

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

当我将其实现为作为JIRA报告时，JIRA中的左栏将移到中间。

​

图像仅用于说明性目的。

我研究并发现问题出在甘特库CSS文件中：

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

不要试图去理解它，它在美化代码之后有10000行代码。但经过调试，我找到了解决方案。删除此代码时，JIRA左栏向左移动，一切看起来都很好：

.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
}

但下列情况除外：

​

图像仅用于说明性目的。

页脚移动到甘特图的顶部。因此，有第二个选择是更好的，但我仍然喜欢我的脚下面。

我试着更改CSS值，但是除了屏幕截图中显示的这两个结果之外，无法产生任何其他结果。

总之，如何将页脚和JIRA栏左移。。

Answer 1

问题是Ext在页面上是全局的，与其他元素冲突。这篇文章可能会有所帮助，并有助于将CSS的“范围”设置为页面上的任何元素--比如甘特图容器div等等。

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

使用：

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

以及所有范围的.ext。应该这么做。