0

I have added popover to headerCellTemplate, but it dosen seem to be working. 

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 the above code only Address is getting displayed in grid, but popover dosen come. Even style is working fine. Only popover is not working. i tried using popover-append-to-body="true" instead of popover-append-to-header="true". but still no luck.

apps
  • 313
  • 1
  • 7
  • 17

1 Answers1

0

The reason the popover isn't showing up is because the ui-grid doesn't allow overflow style elements by default. If you want the popover to show up above the grid itself, this could be tricky but doable by changing two of ui-grid's css classes.

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

These overflow attributes are originally "hidden", so change them to "visible".

I say this could be tricky because you might run into other style problems by doing this. For example if your headers are wider than the width of the grid.

G Dan
  • 96
  • 1
  • 5