Can not able to apply padding to our own html element

[Prshant-Sharma]

I'm using ngx-ui-tour-md-menu of version 8.1.2

How can I apply custom CSS to the HTML element on which tourAnchor is applied?

Basically, I want to give some padding and want to round the corners of the element where UI tour is shown for better looks. I can't use backdropConfig option as I'm using version 8 of ngx-ui-tour-md-menu and this option is not available for this version.

I followed documentation as well but it doesn't work for me as shown below:

I'm using this below snippet of CSS in my code to give padding to the button Let's Start. Just like its shown in left-right, same I want from top and bottom too.

Hope you understand the challenge that I'm facing to give custom CSS.
Looking forward for your assistance here.

[hakimio]

In case of a button, you might have to nest it in another div element and set tourAnchor to the new div container to get the desired result.
Check out this demo project for an example of how it can be done.

[Prshant-Sharma]

@hakimio, thanks for your quick response!

I tried the same way that you suggested but the problem I got to know is if I change the window size then its showing perfectly, means if I open the console window below then it take all the padding correctly but initially, its not showing as it should be!

Below is the initial screenshot:

After opening the just console window below, its showing fine:

[hakimio]

Maybe your button is not fully rendered when the tour is trying to get its bounding rectangle. You can try to set delayBeforeStepShow option to see if it helps.
If you can reproduce the issue with the latest version of the library, feel free to submit a new bug report with reproduction of the issue.