Intro.js: introjs-fixParent class with position:absolute?

[ibc]

So when start() is called, the library adds the CSS class "introjs-fixParent" to some parent element (not sure which one), and such a class includes:

position: absolute !important;

How is that? Obviously that breaks the whole CSS (in my case it's overriding the position of a flex item so everything is broken.

[ibc]

In fact, by just removing the position: absolute !important; from .introjs-fixParent things work much better.

[ibc]

Authors, you don't like managing issues right? 179 open issues is a disaster.

[chevtek]

Same issue for me. No idea why this class gets added. I had to override the position rule in my own CSS to get it back to normal.

I think this library may just be too popular for how many people maintain it. Know any decent alternatives?

[afshinm]

I will have a look into this.

@ibc re disaster: I'm trying to solve issues but feel free to choose another library :) You don't have to use Intro.js. Cheers.

[afshinm]

thanks for report anyway.

[ibc]

Thanks @afshinm. If it helps, removing such a position: absolute !important from the parent element does perfectly work (at least in my case).

[chevtek]

re disaster: I'm trying to solve issues but feel free to choose another library :) You don't have to use Intro.js. Cheers.

I totally understand how things get out of control with popular side projects. No worries.

If it helps, removing such a position: absolute !important from the parent element does perfectly work (at least in my case).

Same for me. I just had to make a more specific CSS selector for my element in my own stylesheet and set the position to what it should be. Wish I didn't have to use !important though to override it but it works.

[afshinm]

Cheers. Will have a look and release a version soon. I have fixed some
other issues as well so I will probably release a minor version soon.

Thank you both

On Tuesday 24 May 2016, Alex Ford [email protected] wrote:

re disaster: I'm trying to solve issues but feel free to choose another
library :) You don't have to use Intro.js. Cheers.

I totally understand how things get out of control with popular side
projects. No worries.

If it helps, removing such a position: absolute !important from the parent
element does perfectly work (at least in my case).

Same for me. I just had to make a more specific CSS selector for my
element in my own stylesheet and set the position to what it should be.
Wish I didn't have to use !important though to override it but it works.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/usablica/intro.js/issues/583#issuecomment-221122423

[atomicleopard]

Same issue here, it feels like the easiest solution is to only add the style rule (either with class or with JS) if the fix-parent isn't already positioned.

[verstoff]

Up! The problem is still relevant

[afshinm]

sure guys. we will fix this for the next version.

[afshinm]

Excuse me for this long delay guys, I just removed the position: absolute from the fix parent class and I think this one should work better.

Sorry for this problem. I will release another version today/tomorrow.

thanks @ibc and @chevex for the report and apologies for the delay.

[rdacn]

Just to mention that in some cases, this
position: absolute !important;
can solve the stacking context problem, with elements not highlighting as seen in #109
The fixParent class was created for that purpose, I suppose, with everything aiming to temporarily remove the stacking context including positioning, but it's true that position:absolute can break the general layout, so I understand it was removed.
Anyway, I added it manually to my CSS and my layout was not broken, so it's worth giving it a try if you have the #109 issue.