AngularJS UI Grid und Popover-Ausrichtung

Question

Hallo Ich bin ein Hinzufügen von Popover zu UI-Raster in AngularJS. Die Idee ist, wenn der Benutzer die Maus über eine Zeile bewegt, erscheint ein Popover und das Popover enthält eine Direktive. Ich habe diesen Teil erfolgreich umgesetzt, aber jetzt ist das Problem, dass ein Teil des popover vom ui Gittertabelle blockiert ist, wie folgt aus:

Ich möchte an die Front der popover bringen, und ich Ich habe versucht, den Z-Index für die UI-Grid-Tabelle und das Popover zu setzen. Zugehöriger Code ist hier:

JS Teil:

function rowTemplate() { 
    var template = []; 
    ... 
    template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>'); 
    return template.join(' '); 
} 

HTML:

<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative"> 
</div> 

<script type="text/ng-template" id="popover.html"> 
    <div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative"> 
     <directive-related part /> 
    </div> 
</script> 

Aber nachdem ich den Z-Index gesetzt, es funktioniert immer noch nicht. Wie kann ich das beheben? Einige meiner Referenzen sind hier: Popover: popover, Z-Index: z-index.

Danke!

Answer 1

Hinweis: Ich nehme hier an, dass Sie ui-bootstrap verwenden.

Ich habe festgestellt, dass Sie in der Regel das append-to-body-Attribut mit benutzerdefinierten ui-Grid-Formaten verwenden müssen.

Versuchen Sie, die Vorlage wie so dieses Attribut hinzufügen:

template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')