driver.js icon indicating copy to clipboard operation
driver.js copied to clipboard

Highlighted element is not visible, solid background covers the content

Open jackie-d opened this issue 3 years ago • 6 comments

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:

Schermata 2020-05-26 alle 15 36 46

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.

jackie-d avatar May 26 '20 13:05 jackie-d

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 avatar May 27 '20 10:05 kamranahmedse

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

jackie-d avatar May 27 '20 13:05 jackie-d

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

PeterPan73 avatar Jul 14 '20 17:07 PeterPan73

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?

jenslw avatar Aug 25 '20 06:08 jenslw

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

mewalig avatar Feb 27 '21 01:02 mewalig

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;
}

aldoadhi avatar Mar 07 '22 01:03 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;
}

This hack worked, thanks @aldoadhi

pagarevijayy avatar Dec 19 '22 13:12 pagarevijayy

still I have this issue with materialize side nav bar. please anyone can fix this. Thank you. Screenshot 2023-01-19 130040

ghost avatar Jan 19 '23 08:01 ghost

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.

kamranahmedse avatar Jul 05 '23 16:07 kamranahmedse