javascript - 在将甘特图添加为 JIRA 报告时遇到 CSS 问题

Question

我正在为甘特图使用这个库:

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

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

图片仅供说明之用。

我研究发现问题出在 Gantt 库 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 JS CSS 在页面上是全局的，与其他元素冲突。这篇文章可能会有所帮助，并有助于将 CSS 的“范围”设置为页面上的任何元素——比如甘特图容器 div 等。

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

使用:

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

与 ext-all-scoped.css 一起。应该这样做。