search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.8k stars 2.59k forks source link

introjs-fixParent class with position:absolute? #583

Closed ibc closed 8 years ago

ibc commented 8 years ago

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 commented 8 years ago

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

ibc commented 8 years ago

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

chevcast commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

thanks for report anyway.

ibc commented 8 years ago

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

chevcast commented 8 years ago

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 commented 8 years ago

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 notifications@github.com 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 commented 8 years ago

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 commented 8 years ago

Up! The problem is still relevant

afshinm commented 8 years ago

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

afshinm commented 8 years ago

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 commented 6 years ago

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.