How can I position a Foundation-Apps zf-panel on same grid row as clickable

Question

I'm using Foundation-Apps library in an Angular application.

I'm trying to create a grid of components (of varying number) which, when clicked on, cause a panel to sit over the top of the row that clicked element is part of.

The panel should cover the whole row, but only that row.

What I've got so far changes data and displays the panel ok. but it is always at the top of the grid (not a suprise given where it sits in the code).

You'll notice the panel actually contains an instance of the directive producing the html, so including the panel in there wont work (it goes into infinite loop).

Any suggestions?

Code as it stands:

<div class="grid-block wrap">
  <div zf-panel="" id="objectDetailOverlayPanel"
   class=" objectDetailOverlayPanel"
   position="left"
   style="width: 100%; height: auto; box-shadow: none;">
<a href="#" zf-close="">
  <img src="..."
       class="float-right"
  />
</a>
<myDirective anObject="vm.selectedObject" expanded="true"/>
</div>
   <!-- generate grid of objects in rows of 4 -->
  <div ng-repeat="anObject in vm.objects" class="grid-content small-3">
    <myDirective anObject="anObject" expanded="false" detail-toggleable="true"
           ng-click="vm.selectedObject = anObject"/>
  </div>
</div>

Answer 1

In case anyone else finds this, I ended up adding a function in my directive controller which gets called on ng-click on the panel close link.

  positionOverlayPanel() {
const overlayPanel = document.getElementById('assetDetailOverlayPanel');

angular.element(overlayPanel)
  .css('top', `${this._$element[0].offsetTop}px`);

}

It's not pretty, I'm sure there are better ways, but it works!