Setting top on bind() in a custom attribute

Help Requests
1

Hi All,

It is basically a css thing, but since I use aurelia, you might have had this issue before.
What I want is a ‘caption’ above a (div) using a z-index, and absolute positioning, as they say, it should be done.

I wrote a simple CustomAttribute which calculates this.
PROBLEM: .parentElement.getBoundingClientRect(); always returns zero’s.

QUESTION: How to calculate the coordinates from a parent div in order to position a z-indexed div?

import {autoinject} from ‘aurelia-framework’;
@autoinject
export class SetPositionCustomAttribute {
private readonly element: HTMLElement;
constructor(element: Element ) {
this.element = element;
}

bind() {
  let parentPos = this.element.parentElement.getBoundingClientRect();
  this.element.style.top =  parentPos.top - 10 + 'px';
  this.element.style.right = parentPos.right + 10 + 'px';
  console.log(`${parentPos.top}:${parentPos.right}`)
  this.element.style.visibility = 'visible';
}

}
The template is like this:

            <div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="verse of chModel.texts">
              <div class="card"  if.bind="verse.done" title="${chModel.meta.title} ${chapter.ch}:${verse.verse}">
                <div class="cap" **set-position**><--- code snipped--></div>
1 Like
2

It’s just a guess, haven’t looked at the code, but zero indicates the element isn’t rendered or yet attached to the DOM. The reason could be your action inside bind as the host element might not yet be rendered. Try a different hook like attached

2 Likes
3

bind is to early for what you are trying to achieve.
the actual size is determined only after the element is attached to the DOM. so try the attached lyfcycle instead.

3 Likes
4

I think I was ignorant about position:absolute when placed within a relative div, the absolute position of say top:15px is measured from within the relative div. So I don’t need a custom attribute.

2 Likes