Возникли проблемы css с добавлением диаграммы Ганта в отчет JIRA

Я использую эту библиотеку для Ганта:

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 слева.


javascript css jira gantt-chart extjs
person Jaanus    schedule 29.06.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что CSS Ext JS является глобальным на странице и конфликтует с другими элементами. Этот пост может помочь и помогает установить «область действия» CSS для любого элемента на странице — например, для контейнера div диаграммы Ганта и т. д.

Как ограничить CSS сброса, чтобы он применялся к компонентам Ext, используя свойство scopeResetCSS?

Использовать:

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

вместе с ext-all-scoped.css. Должен сделать это.

person Mats Bryntse    schedule 01.07.2012
comment
Говорили, что работает только с 4.0.2 и ниже. Но у вас на странице только новые версии, старые ссылки не работают. Можете ли вы дать мне ссылки на архивные версии? - person Jaanus; 03.07.2012
comment
В решении, которое вы мне дали, есть ссылка с дополнительной информацией и посмотрите комментарии: blog.djsipe.com/2011/07/08/scoping-extjs-css , говорят, что это не будет работать с новым Ext JS. - person Jaanus; 04.07.2012
comment
См. мой ответ здесь, это может помочь: sencha.com/forum/ - person Mats Bryntse; 05.07.2012
comment
Разве вы не читали мой первый пост, я вам сказал, что я удалил x-border-box вручную из css, и он делает то же самое, что и ваша команда. Стало все лучше, кроме 2-х багов: Нижний колонтитул прыгает вверх, как я описал в первом посте, стрелки внутри не окрашены, только 2 строки и наконечник стрелки. - person Jaanus; 05.07.2012
comment
У вас есть это где-нибудь в Интернете, чтобы я мог его проверить? - person Mats Bryntse; 06.07.2012