Раскрывающееся меню «Положение» располагается рядом со строкой, щелкнув правой кнопкой мыши строку

Question

Привет, у меня есть код ниже, чтобы получить данные таблицы при импорте файла CSV. Сейчас мы разрабатываем функциональность, в то время как правой кнопкой мыши открывается всплывающее меню первого ряда, и мы хотим отредактировать строку или добавить новую строку как прикрепленный снимок.

HTML-файл

<form name="editForm" role="form" novalidate ng-submit="vm.save()">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="myTaskPlanLabel" data-translate="taskManagementApp.taskPlan.home.importLabel">Create or edit a Task Plan</h4>
        <p> Download a sample CSV file from <a href="https://ge.box.com/s/wfeh0q0xfh2e4qii8h78rnnywhub9ai2" target="_blank">here</a> </p>
        <p> Note: The dates in the CSV file should strictly be in the dd/mm/yyyy format. </p>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group" ng-hide="TaskPlanImportController.results">
            <input type="file" class="form-control" id="importfile" name="importfile"
                    csv-reader complete="vm.validateResults(importeddata)"/>
        </div>
    </div>

    <div class="table-responsive">
        <table class="jh-table table table-striped">
            <thead>
                <tr>
                    <!-- matamagu
                    <th><span data-translate="global.field.id">ID</span></th>
                    -->
                    <th class="col-sno">S.no</th>
                    <th><span data-translate="taskManagementApp.taskPlan.machine">Machine</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.project">Project</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.projectComponent">Project Component</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.setup">Setup</span></th>
                    <!--
                    <th><span data-translate="taskManagementApp.taskPlan.taskDetails">Task Details</span></th>
                    -->
                    <th><span data-translate="taskManagementApp.taskPlan.plannedStartDateCurrent">Current Start Date</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.plannedStartDateNew">New Start Date</span></th>
                    <th><span data-translate="taskManagementApp.taskPlan.taskStatus">Task Status</span></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="taskPlanItem in vm.importeddata"
                                ng-right-click="openContextMenu($event, $index)"
                                ng-click="rtcl($event, $index)">

                    <td class="col-sno">
                        <span>{{$index+1}}</span>
                    </td>

                    <!-- matamagu
                    <td><a ui-sref="task-plan-detail({id:taskPlan.id})">{{taskPlan.id}}</a></td>
                    -->
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Machine" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Project" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Component" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Setup" />
                        </span>
                    </td>
                    <!-- matamagu
                    <td>
                        {{taskPlanItem.Task_Name}}
                    </td>
                    -->
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Current_Start_Date" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.New_Start_Date" />
                        </span>
                    </td>
                    <td>
                        <span>
                          <input type="text" class="editable-cell" ng-model="taskPlanItem.Task_Status" />
                        </span>
                    </td>
                </tr>
            </tbody>
         </table>
        <div class="context-menu" ng-show="isContextMenuVisible" ng-style="contextMenuStyle">
          <ul class="dropdown-menu">
            <li>
              <a tabindex="-1" ng-click="addRow()">New Row</a>
            </li>
            <li>
              <a tabindex="-1" ng-click="removeRow()">Remove Row</a>
            </li>
          </ul>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.addnewrow()">
            <span class="glyphicon glyphicon-plus"></span>&nbsp;<span data-translate="entity.action.addrow">Add Row</span>
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span data-translate="entity.action.cancel">Cancel</span>
        </button>
        <button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary">
            <span class="glyphicon glyphicon-cloud-upload"></span>&nbsp;<span data-translate="entity.action.save">Save</span>
        </button>
    </div>
</form>

Файл CSS

 .context-menu {
      position: absolute;
    }
    .context-menu .dropdown-menu {
      display:block;
      position:sticky;
    }

JS код

$scope.isContextMenuVisible = false;
        $scope.contextmenuRowIndex = -1;
        $scope.openContextMenu = function($event, $index){
          $event.preventDefault();
          console.log($event.button);

          if($event.button === 0){
            $scope.isContextMenuVisible = false;
            return;
          }

          $scope.contextmenuRowIndex = $index;
          $scope.contextMenuStyle = {
            top: $event.clientY + 'px',
            left: $event.clientX + 'px'
          };
          $scope.isContextMenuVisible = true;
        };
        $scope.addRow = function(){
          var index = $scope.contextmenuRowIndex;
          vm.importeddata.splice(index, 0, {});
          $scope.isContextMenuVisible = false;
        };
        $scope.removeRow = function(){
          var index = $scope.contextmenuRowIndex;
          vm.importeddata.splice(index, 1);
          $scope.isContextMenuVisible = false;
        };

Теперь, когда я щелкаю правой кнопкой мыши по строке, всплывающее окно не появляется на правильной позиции, иногда оно поднимается, поэтому, когда у нас много данных и всплывающее окно появляется сверху, нам нужно прокрутить, чтобы увидеть это всплывающее окно. я пытался использовать position: fixed, но он не работал как position, я могу исправить, но из js-кода вверху и слева динамически идет класс контекстного меню.

это то, что, как мне кажется, мы вычисляем неверное верхнее и левое значения, поэтому у нас не появляется всплывающее окно, когда мы щелкаем правой кнопкой мыши. мы получаем значения x и y, даже если мы их устанавливаем, но все же мы получаем, что наше всплывающее меню не совпадает со строкой, и это вызывает проблемы, когда мы прокручиваем данные таблицы.

Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.