5 Replies Latest reply on Feb 21, 2020 3:43 AM by Thien Tran

    Oracle JET 8.0 oj-avatar messed up in IE11

    Thien Tran
    Thien Tran Feb 17, 2020 12:20 PM

      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