Bootstrap выпадающее меню: первый щелчок неправильное положение, второй щелчок правильное положение

Question

Я пытаюсь просто переместить раскрывающееся меню начальной загрузки вправо, поэтому я использую класс dropdown-menu-right.

Однако теперь положение объекта при первом щелчке неверно. Как только вы щелкнете и щелкните еще раз, он окажется в правильном положении. Вот код:

<div class="dropdown show-inline">
    <i type="button" class="fa fa-id-badge" aria-hidden="true" onclick="changeAccount()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
    <div id="user-profile-selection-dropdown-menu" class="dropdown-menu dropdown-menu-right" aria-labelledby="userProfileSelectionMenuButton" style="min-width: 20rem; padding: 10px;">
       <div class="userAccountDetails" id="userAccountDetails">
          <table class="table">
             <thead>
                <tr>
                   <th style="text-align:left;">Full&nbsp;Name</th>
                   <th style="text-align:left;">Customer&nbsp;Group</th>
                   <th style="text-align:left;">Customer&nbsp;Division</th>
                   <th style="text-align:left;">Customer&nbsp;Site</th>
                   <th style="text-align:left;">Current&nbsp;Default</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(17865)"><b>TestUser</b></td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(17865)"><b>ALL</b></td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(17865)"><b>ALL</b></td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(17865)"><b>ALL</b></td>
                   <td style="text-align:left;"><b><span class="col-centered image-container fa fa-user fa-border  fa-fw" aria-hidden="true" style="cursor:normal;"></span></b></td>
                </tr>
                <tr>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(18658)">New</td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(18658)">ALL</td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(18658)">ALL</td>
                   <td style="text-align:left; cursor:pointer;" onclick="changeConfirm(18658)">ALL</td>
                   <td style="text-align:left;"><span class="col-centered image-container fa fa-user-o fa-border  fa-fw" aria-hidden="true" onclick="changeDefault()" style="cursor:pointer;">&nbsp;</span></td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
</div>

При первом открытии меню оно выглядит так, что неверно:

The second time you click the icon to open the menu, it looks like this, which is where it's supposed to be:

введите описание изображения здесь

Функция changeAccount () dr aws всплывающее окно html:

function changeAccount() {
        var path = "@Url.Action("GetUserAccountList")";
        $.get(path, function (data) {
            var htmlData = "<table class='table'>";
            htmlData = htmlData + "<thead>";
            htmlData = htmlData + "<tr>";
            htmlData = htmlData + "<th style='text-align:left;' >Full&nbsp;Name</th>";
            htmlData = htmlData + "<th style='text-align:left;' >Customer&nbsp;Group</th>";
            htmlData = htmlData + "<th style='text-align:left;' >Customer&nbsp;Division</th>";
            htmlData = htmlData + "<th style='text-align:left;' >Customer&nbsp;Site</th>";
            htmlData = htmlData + "<th style='text-align:left;' >Current&nbsp;Default</th>";
            htmlData = htmlData + "</tr>";
            htmlData = htmlData + "</thead>";
            htmlData = htmlData + "<tbody>";
            $.each(data, function (index, row) {
                htmlData = htmlData + "<tr>"
                htmlData = htmlData + "<td style='text-align:left; cursor:pointer;' onclick='changeConfirm(" + row.UserId + ")'>";
                if (row.CurrentUserView) {
                    htmlData = htmlData + "<b>";
                }
                var fullName = row.FullName;
                fullName = fullName.replace(" ", "&nbsp;");
                htmlData = htmlData + fullName;
                if (row.CurrentUserView) {
                    htmlData = htmlData + "</b>";
                }
                htmlData = htmlData + "</td>";
                htmlData = htmlData + "<td style='text-align:left; cursor:pointer;' onclick='changeConfirm(" + row.UserId + ")'>";
                if (row.CurrentUserView) {
                    htmlData = htmlData + "<b>";
                }
                htmlData = htmlData + row.CustomerGroupName;
                if (row.CurrentUserView) {
                    htmlData = htmlData + "</b>";
                }
                htmlData = htmlData + "</td>";
                htmlData = htmlData + "<td style='text-align:left; cursor:pointer;' onclick='changeConfirm(" + row.UserId + ")'>";
                if (row.CurrentUserView) {
                    htmlData = htmlData + "<b>";
                }
                htmlData = htmlData + row.CustomerDivisionName;
                if (row.CurrentUserView) {
                    htmlData = htmlData + "</b>";
                }
                htmlData = htmlData + "</td>";
                htmlData = htmlData + "<td style='text-align:left; cursor:pointer;' onclick='changeConfirm(" + row.UserId + ")'>";
                if (row.CurrentUserView) {
                    htmlData = htmlData + "<b>";
                }
                htmlData = htmlData + row.CustomerSiteName;
                if (row.CurrentUserView) {
                    htmlData = htmlData + "</b>";
                }
                htmlData = htmlData + "</td>";
                htmlData = htmlData + "<td style='text-align:left;' >";
                if (!row.DefaultAccount) {
                    htmlData = htmlData + '<span class="col-centered image-container fa fa-user-o fa-border  fa-fw" aria-hidden="true" onclick="changeDefault(' + row.UserId + ')" style="cursor:pointer;" >&nbsp;</span>';
                } else {
                    htmlData = htmlData + '<b><span class="col-centered image-container fa fa-user fa-border  fa-fw" aria-hidden="true" style="cursor:normal;" ></span></b>'
                }
                htmlData = htmlData + "</td>";

                htmlData = htmlData + "</tr>";
            });
            htmlData = htmlData + "</tbody>";
            htmlData = htmlData + "</table>";
            $('#userAccountDetails').html(htmlData);
        });
    }