Highlighted element is not visible, solid background covers the content

[jackie-d]

I'm experimenting an issue with this JS tool.

I included the css and js from the dist folder.

I configured as follow:

$(document).ready(() => {

    const driver = new Driver({
        animate: true,
        opacity: 0.7,
        padding: 10,
        stageBackground: '#ffffff',
        showButtons: true,
        keyboardControl: true,
        allowClose: false
    });

    driver.defineSteps([
            {
                element: '#element > a > span',
                popover: {
                    title: 'Title',
                    description: 'Description',
                    position: 'right-center'
                }
            }, {
                element: '#element> div > span.my-class',
                popover: {
                    title: 'Title',
                    description: 'Description',
                    position: 'right-center'
               }
           }
        ]
    );

    driver.start();
});

I'm getting the result:

As you can see the highlighted content is totally covered by the white background, and in the DOM the highlighted element is empty.

The same beheviour presents on any element of the page, and with any stageBackground solid color.

Is there a way to configure it properly to get a result as in the examples?

Thanks.

[kamranahmedse]

It seems to be an issue with positioning. Can you please try with animate: false and see if it fixes the issue. Also, please provide a codesandbox example so that we can help better.

[jackie-d]

Yes, I confirm the issue is solved with animate: false

[PeterPan73]

Hi @kamranahmedse When will fix problem with modals in Bootstrap? Thanks.

[jenslw]

It seems to be an issue with positioning. Can you please try with animate: false and see if it fixes the issue. Also, please provide a codesandbox example so that we can help better.

@kamranahmedse I made a quick codepen demonstrating the problem: https://codepen.io/jenslw/pen/qBZrOyE Do you have any idea how to solve this?

[mewalig]

am seeing similar issues w bootstrap menu items, with or without animate

[aldoadhi]

Quick fix using CSS, put this after driver's CSS:

#driver-highlighted-element-stage {
    background: transparent!important;
    outline: 5000px solid rgba(0, 0, 0, .75);
}

#driver-page-overlay {
    background: none !important;
}

[pagarevijayy]

Quick fix using CSS, put this after driver's CSS:

#driver-highlighted-element-stage {
    background: transparent!important;
    outline: 5000px solid rgba(0, 0, 0, .75);
}

#driver-page-overlay {
    background: none !important;
}

This hack worked, thanks @aldoadhi

[ghost]

still I have this issue with materialize side nav bar. please anyone can fix this. Thank you.

[kamranahmedse]

We just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.