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

      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