0

I drew a diagram in gojs, the diagram does not show in IE11, but in other browsers it is displayed as usual. There are also other diagrams in the system, and they are shown.

  The style of the div that wraps the diagram (diagram.div):

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

  In f12 I saw that the canvas has property: "height=1" compared to other browsers where the canvas has a height of several hundred.

If I change the div's height to px and not in percentage, the diagram is displayed as usual.

the structure of the elements:

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

the 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;
}
lea fishman
  • 57
  • 8
  • 1
    I try to check the samples of Gojs and it runs correctly on IE 11 browser. You need to post a sample code which can produce the issue. We are not able to produce the issue with your above css code. also it looks like you had already found the work around for the issue. – Deepak-MSFT Aug 01 '19 at 13:58

2 Answers2

0

You cannot set height: 100% unless you also set outer elements to have an accommodating height.

Often but not always you simply need to add to your CSS:

html, body {
  height:100%;
}
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
0

According to Make a DIV fill an entire table cell, and Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome), The problem is that IE cell in table does not get percentage height (it must get a fixed number), so cabinetMap does not get value.

Because the table is dynamic, I added a snippet of code that sets the height:

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();
    }
lea fishman
  • 57
  • 8