диаграмма gojs не отображается в IE11

Я нарисовал диаграмму в gojs, в IE11 диаграмма не отображается, но в других браузерах она отображается как обычно. В системе есть и другие схемы, и они показаны.

Стиль блока div, который охватывает диаграмму (diagram.div):

   position: absolute;
     width: calc (100% - 0.625rem);
     height: 100%;
     z-index: 1000;
     float: right;
     top: 1.25brake;

В f12 я увидел, что холст имеет свойство: «height = 1» по сравнению с другими браузерами, где холст имеет высоту в несколько сотен.

Если я изменю высоту div на px, а не в процентах, диаграмма будет отображаться как обычно.

состав элементов:

   <div class="cabinets-grid">
    <div class="cabinet-unit">
    <cabinet-map>
    <div class="cabinetMap" id="cabinetDiagram">
    <canvas width="231" height="1" style="..."></canvas>
    <div style="..."></div>
    </div>
    </cabinet-map>
<cabinet-map>
...
</cabinet-map>
    </div>
    </div>

scss:

.cabinets-grid
{
display:table;
border-collapse:collapse;
width: calc(100% - 3.438rem);
height:100%;
margin-left: 3.438;
table-layout:fixed;
}
.cabinet-unit
{
display:table-cell;
position:relative;
}
.cabinetMap {
position:absolute;
width:calc(100% - 0.625rem);
height:calc(100% - 1.5rem);
z-index:1000;
float:right;
top:1.25rem;
}

css internet-explorer-11 gojs
person lea fishman    schedule 01.08.2019    source источник
comment
Я пытаюсь проверить образцы Gojs, и он правильно работает в браузере IE 11. Вам необходимо опубликовать образец кода, который может вызвать проблему. Мы не можем создать проблему с указанным выше кодом CSS. также похоже, что вы уже нашли способ решения проблемы.   -  person Deepak-MSFT    schedule 01.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы не можете установить height: 100%, если вы также не установите для внешних элементов соответствующую высоту.

Часто, но не всегда вам просто нужно добавить в свой CSS:

html, body {
  height:100%;
}
person Simon Sarris    schedule 01.08.2019
comment
У меня такой стиль настройки. - person lea fishman; 01.08.2019

arrow_upward
0
arrow_downward

Согласно Заставьте DIV заполнить всю ячейку таблицы и Проблема с Firefox, IE9 + с высотой div 100% внутри td (рабочий пример в Chrome). Проблема в том, что ячейка IE в таблице не получает высоту в процентах (она должна получать фиксированное число), поэтому cabinMap не получает значения.

Поскольку таблица динамическая, я добавил фрагмент кода, который устанавливает высоту:

const cabinets_grid = this.diagram.div.parentElement.parentElement.parentElement;
const height = cabinets_grid.getBoundingClientRect().height
    if (!height) {
        setTimeout(() => {
            this.calcCabinetHeight(onLoad);
        }, 150);
    }
    else {
        this.diagram.div.style.height = height - 24 + 'px';
        this.zoomToFit();
    }
person lea fishman    schedule 05.08.2019