Intro box is half hidden, when placed on a flex navbar item at the end of the screen

[ufo2mstar]

Have some CSS overlap issues on the edge of the screen, but not sure if they are an introjs issue or issue with this react port

Will just open another issue to look into, just in case.. lemme know if you need a code sample @HiDeoo :

This is the right end of my screen: happens in a bunch of screensizes

[HiDeoo]

I had lots of issues with positioning when using intro.js, most of the time it was either intro.js issues that I could avoid by tweaking their CSS from my own styles (or even by forking their lib and tweak some calculations), or my own CSS that would lead to weird results.

I've setup a small repro of a navbar using flex, altho I didn't mange to reproduce.

Regarding the React wrapper, it doesn't do itself anything related to CSS or positioning so I highly doubt the issue is on this side.

[ufo2mstar]

Yes @HiDeoo , definitely not on this lib side! I'm realizing that introJs calculations are pretty static and do not support responsive design out of the box.

and thanks for putting up this quick example to test! :D I solved this issue with a position attribute in the steps:

Code:

steps: [
   ....
    {
      element: '#top-right-item',
      intro: '...',
      position: 'left',
    },
   ...
],

Result:

[HiDeoo]

Glad you solved it. Thanks for providing your solution.