Popover funktioniert nicht in UI-Grid HeaderCellTemplate

Question

Ich habe Popover zu HeaderCellTemplate hinzugefügt, aber es scheint zu funktionieren.

headerCellTemplate: '<div popover="Info" popover-title="Title" popover-trigger="mouseenter" popover-placement="top" popover-append-to-header="true" style="padding-top: 5px;line-height: 1.2;vertical-align: baseline;">' + Address + '</div>' 

In den obigen Code nur Adresse wird im Raster angezeigt, aber Popover Dosen kommen. Sogar der Stil funktioniert gut. Nur Popover funktioniert nicht. Ich habe versucht, mit popover-append-to-body = "true" anstelle von popover-append-to-header = "true". aber immer noch kein Glück.

Answer 1

Der Grund dafür, dass das Popover nicht angezeigt wird, liegt darin, dass das UI-Grid standardmäßig keine Überlauf-Stilelemente zulässt. Wenn Sie möchten, dass das Popover über dem Gitter selbst angezeigt wird, könnte dies schwierig sein, aber machbar, indem Sie zwei der CSS-Klassen von ui-grid ändern.

.ui-grid-top-panel { 
    overflow: visible; 
} 
.ui-grid-header-viewport { 
    overflow: visible; 
} 

Diese Überlauf-Attribute sind ursprünglich „versteckt“, so sie wechseln auf „sichtbar“.

Ich sage, dass dies schwierig sein könnte, weil Sie dabei auf andere Stilprobleme stoßen könnten. Zum Beispiel, wenn Ihre Header breiter sind als die Breite des Rasters.