ngx-popper: Popper is not always first, hides behind other element
Hello. My implementation of ngx-popper doesn’t always put the popper as the front html element.
My markup:
<a *ngIf="fieldValue.field.description?.length > 0" [popper]="fieldValue.field.description" [popperTrigger]="'hover'" [popperPlacement]="'auto-top'" href="javascript:void(0)" class="tooltip-icon text-left" > <sup> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> </sup> </a>
I have a custom css hook for the container element aswell. Maybe this is causing the issue?
.ngxp__container { text-align: left; opacity: 1 !important; background-color: #656d79; text-align: left; padding: 15px !important; max-width: 300px; font-size: 12px; line-height: 20px; border-radius: 5px !important; color: white; border: 1px solid #656d79 !important; border-bottom: 3px solid #434a54 !important; }
How can I fix this?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 1
- Comments: 18 (8 by maintainers)
createPopper(reference, popper, { strategy: ‘fixed’, });
Default position is “absolute”. This resolved the issue for me.
Have you tried giving the container
position: relativeand a higher z-index?That worked great! added these styles: .ngxp__container { … position: relative; z-index: 999; }
z-index = 999 to be sure that 99% of all times it should render on top of all other elements.
So it turns out that you’re right. The popper is hidden by the overflow element; however, I resolved the issue by placing the
<popper-content>in a wider scoped tag on the page. E.g. In the<body>tag directly, rather than inline with the element being popped. This allowed the library to position and display the popper correctly.Maybe worth noting that as a general strategy / requirement in the instructions?
@lincolnthree z-index applies to all positioned element i.e.(absolute, relative, fixed). ngx__container is absolute by default so you can leave it at that.
You may be encountering a situation where the container element has
overflow: hiddenapplied to it.If you want to create a demo repo I can maybe help more specifically.