Hi everyone, I am having some problems when migrating my application from Oracle JET 6.2 to Oracle JET 8.0.
The problem is that, I am using <oj-avatar> inside a <table> like this
\<table>
\<tr>
\<td class="avatar-member-wrapper">
\<oj-avatar class="avatar-member" size="md" initials="\[\[$parent.getNameInitials($data)\]\]" />
\</td>
\<td>
\<table>
\<tr class="info-item">
\<div class="member-absence-name">
\<oj-bind-text value="\[\[fullName\]\]">\</oj-bind-text>
\</div>
\</tr>
\<tr class="info-item">
\<oj-bind-text
value="\[\[calculation here\]\]">
\</oj-bind-text>
\</tr>
\<tr class="info-item">
\<oj-bind-text value="\[\[absence reason here\]\]">\</oj-bind-text>
\</tr>
\<tr class="info-item">
\<oj-bind-text value="\[\[get date here\]\]">\</oj-bind-text>
\</tr>
\</table>
\</td>
\</tr>
\</table>
On Chrome and Firefox, it works normally as expected. However, on IE11, it messes up the layout where the latter <td> is a child of the first <td> like this 
.
So instead of this (on Chrome)
, we get this instead 
.
I've found a temporary workaround for this problem, that is to surround the <oj-avatar> with an empty <div>, and everything is OK.
Side notes, when I tested on a fresh Oracle JET 8.0 application, this does not happen. Also, this part is inside an <oj-filmstrip>, which is a part of a Custom Web Component. Moreover, I have tried removing all the CSS classes, and the problem still persists.
If you need any further information, please do let me know.
Thanks in advance,
Cheers
Thien