uib-dropdown dislocated when using in ui-grid cellTemplate

Question

I want to show a uib-dropdown menu in a ui-grid cell. I've given that and its working fine. But the problem belongs to its position. uib-dropdown opened in cell

The shown drop-down menu is of the first row. The menu for the 2nd row will be shown even more downwards only. I inspected and tried so many ways to make it close to the selected row. But nothing worked. The given cell template in ui-grid is given below.

columnDefs: [
                 {
                     name: app.localize('Actions'),
                     enableSorting: false,
                     width: 120,
                     cellTemplate:
                         '<div class=\"ui-grid-cell-contents\">' +
                         '  <div class="btn-group dropdown" uib-dropdown="" dropdown-append-to-body>' +
                         '    <button class="btn btn-xs btn-primary blue" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span></button>' +
                         '    <ul uib-dropdown-menu>' +
                           '      <li><a ng-click="grid.appScope.detailsView(row.entity)">' + app.localize('Details') + '</a></li>' +
                         '      <li><a ng-if="grid.appScope.permissions.edit"  ng-click="grid.appScope.editClassDiary(row.entity)">' + app.localize('Edit') + '</a></li>' +
                         '      <li><a ng-if="grid.appScope.permissions.delete"  ng-click="grid.appScope.deleteClassDiary(row.entity)">' + app.localize('Delete') + '</a></li>' +
                         '    </ul>' +
                         '  </div>' +
                         '</div>'
                 }

Also tried by removing the dropdown-append-to-body. But then the entire menu moved into the cell. Only the cell size portion is visible. Please help me somebody..