Introjs is not highlighting the fuse-sidebar elements

Question

I have created an angular project for which I am using fuse-sidebar. I am also using introjs. That is working fine but this is not highlighting the elements that are inside fuse-sidebar.

This is how it looks for elements inside fuse-sidebar

And this is how for the elements outside the fuse-sidebar

for fuse elements there is highligher but the element is not shown in the highlight area like in the second photo that is for element that is outside the fuse-sidebar.

What could be the issue?

the html is like this

<fuse-sidebar></fuse-sidebar>
<div>other elements</div>

For div the z-index was 1001 so I have set the same to fuse-sidebar. But not working?

Answer 1

There was CSS conflict. fuse-bar itself was setting

-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;

So I need to unset transform property

fuse-sidebar.locked-open.introjs-fixParent {
    -webkit-transform: unset !important;
    transform: unset !important;
}

this solved my problem.