Displayed above its corresponding input element or sometimes vertically anywhere on the page. I am looking to have it appear below the input element instead.
https://i.sstatic.net/nEDwc.png
https://i.sstatic.net/pVbhG.png
Currently, it is overlapping its own input element.
It seems like the positioning function might be the root cause of this issue.
Here is the code snippet:
setElemPosition() {
const rect = this.elementRef.nativeElement.getBoundingClientRect();
if (this.domele) {
this.domele.style.position = 'absolute';
this.domele.style.top = rect.top + this.elementRef.nativeElement.scrollHeight + 'px';
this.domele.style.left = rect.left + 'px';
this.domele.style.width = Math.floor(rect.width) + 'px';
this.domele.style.zIndex = '9999999999';
}
}