2016-08-03 26 views
1

Ich entwickelte meine Webanwendung mit Handsontable in Chrome. Es hat Spaß gemacht und hat gut funktioniert.HandsonsTable in IE11 rendert keine Datenspalten mit Kopfzeilenspalten

Aber jetzt versuche ich, es in IE11 zu arbeiten, und es hat erhebliche Rendering-Probleme.

Die erste, und das Thema dieser Frage ist, dass die tatsächliche Breite des Gitters nicht mit den Headern übereinstimmt. Hier ist ein Bild:

width in IE is messed up

ich bekommen kann es in der Nähe arbeiten, indem Sie diesen Stil zu meiner App hinzufügen:

.wtHolder { 
    width: 100% !important; 
} 

Aber sie immer noch nicht in eine Reihe aufstellen richtig und es scheint ein bisschen von einem Hack zu einem !important auf einer handsontable Klasse zu tun haben.

Gibt es eine Möglichkeit, dies in IE11 richtig aussehen zu lassen?

Zusätzliche Information:

Wenn ich diese handsontable Instanz erstellen, Ich gründe die folgenden Optionen:

createOptions(): ht.Options { 
    let options: ht.Options = {}; 

    options.data = this.tableData; 
    options.colHeaders = true; 
    options.colHeaders = this.columnHeaders; 
    options.colWidths = this.columnWidths; 
    options.stretchH = 'all'; 
    options.columns = this.columnMappings; 
    options.minSpareRows = this.minSpareRows; 
    options.readOnly = this.isReadOnly; 

    return options; 
} 

Update:

Die Quelle des Fehlers scheint die div mit zu sein Die Klasse wurde auf wtHolder festgelegt. Es ist nicht wtHolder, das ist das Problem. Das div hat style="width: 41.66%".

Wenn ich das width entferne, dann wird das Raster korrekt angezeigt. Nicht sicher, wie man es im Code entfernt (da dies durch handsontable eingestellt wird).

+0

Der Code, der die Optionen legt sieht Syntaxfehler haben. Sie haben keine Funktion deklariert. – 4castle

+0

@ 4castle - Ich hätte vielleicht erwähnen sollen, aber das ist Typoskript. – Vaccano

Antwort

1

Dieser Stil scheint dieses Problem zu beheben:

/*IE11 does not display widths correctly. This fixes that error.*/ 
.wtHolder { 
    width: auto !important; 
}