2017-08-08 1 views
1

J'essaie d'inclure un uib-popover à l'intérieur d'une cellule ag-grid. Cependant, le popover est coupé (par les paramètres de débordement de la grille). Quelle est la meilleure façon de faire ce travail?uib-popover n'apparaît pas dans ag-grid

Voici le code qui met en place la grille:

function _setGridOptions() { 

    $ctrl.agGridOptions = { 
     suppressHorizontalScroll: true, 
     suppressColumnVirtualization: true, 
     angularCompileRows: true, 
     rowHeight: 64, 
     columnDefs: [ 
      {headerName: "", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true}, 
      {headerName: "Sender", field: "submitterName", tooltipField: "submitterName", cellClass: "sender_name"}, 
      {headerName: "Package", field: "packageName", tooltipField: "packageName"}, 
      {headerName: "Document", cellRenderer: $ctrl._documentNameRenderer}, 
      {headerName: "Document Status", cellRenderer: $ctrl._stateRenderer}, 
      {headerName: "Recording Date", cellRenderer: $ctrl._recordingDateRenderer}, 
      {headerName: "", template: '<div style="height: 40px;"></div><div uib-popover="I appeared on mouse enter!" popover-trigger="\'mouseenter\'">hover</div>'} 
     ], 
     onGridSizeChanged: function() { 
      $ctrl.agGridOptions.api.sizeColumnsToFit(); 
     }, 
     onGridReady: function (param) { 
      $ctrl.agGridOptions.api = param.api; 
      if ($ctrl.search_results) { 
       $ctrl.agGridOptions.api.setRowData($ctrl.search_results); 
       $ctrl.agGridOptions.api.doLayout(); 
      } 
     } 
    }; 
} 

Et voici à quoi il ressemble lorsque vous passez la souris sur la div ... uib popover is cut off

Répondre

0

Un collègue m'a pointé la solution ... Tout ce que vous avez à faire est d'ajouter 'popover-append-to-body = "true"' Cela va attacher le popover à l'étiquette du corps au lieu du parent, de sorte que les paramètres de débordement ne l'affectent pas .