intro.js
intro.js copied to clipboard
usablica
Selected Element doesn't show on top of overlay... Problem with z index
I tried to use introjs, then everything looks fin, except, when an element is selected then element is placed under the selector box, and because of its background transparency, I can see it but not clear, it looks despite having higher z-index to the selected element by adding two classes "introjs-showElement introjs-relativePosition", but still my element get some other CSS side-effects from another one, I wanted to see have been faced by something like this...
Thanks for report. Could you please provide an online example of your problem? Like jsFiddle.
Yes, I can also confirm this is happening. Looks like the intro-js layers are being appended to the DOM in the body, not as siblings of the target's parent. I believe that the z-index won't work unless the intro-js layers are adjacent in the DOM to the target.
Yes, Actually, if the selected element is nested through some DIVs (or any other block elements) with position RELATIVE, this bug will be raised! Basically when B is nested within A and A is relative, then turn B to an ABSOLUTE div, just make it absolute in relative to the A region, not to the whole "window", so that's why, doesn't matter how much is its "z-index", still B is sucked within A and there is no way to get out!! Moreover if A is nested in another relative element then this story would be more complicated. But there is a solution....I hv to try...
On Mon, Apr 29, 2013 at 6:09 AM, tvpmb [email protected] wrote:
Yes, I can also confirm this is happening. Looks like the intro-js layers are being appended to the DOM in the body, not as siblings of the target's parent. I believe that the z-index won't work unless the intro-js layers are adjacent in the DOM to the target.
— Reply to this email directly or view it on GitHubhttps://github.com/usablica/intro.js/issues/109#issuecomment-17143782 .
I've created a fiddle to demonstrate the problem: http://jsfiddle.net/Zwr7s/
Looks to be when the parent has both absolute positioning and a z-index.
UPDATE - actually, it happens whether the parent has absolute or relative positioning. Doesn't occur when no position is set (static)
I fixed that. Could someone check that the problem is solved or not? I need a confirm.
Thanks for the quick update, but I've got two problems:
- it doesn't work for a parent with position: fixed
- it looks like you're removing the z-index of the parent - this is a little heavy handed! I need my existing z-index attributes to remain as they are, otherwise it breaks existing layout.
I've spent a bit of time fiddling with this now, and I'm not sure it can be solved. My basic fiddle is http://jsfiddle.net/7MPpe/ - you can see I'm trying to cater for any type of nesting. No combination of z-index's seems to be able to elevate the target element above the mask.
And reading https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context seems to indicate that it's impossible to do. It appears the z-index property is relative only to the parent container, so an external div cannot be manipulated to sit in-between.
@Dozyatom Really we can't fix this problem in another way, that's the only way! I want your feedback, what you think about the current patch? I believe this patch at least could solve some problems.
Sorry guys but this problem still exists. I need more time to solve this problem.
We can help, after all this is an open source project.
Tell us more about what do you think its happening.
I think this problem is not solvable using traditional HTML/CSS -- Its just the way that z-index + html nesting child/parent relationships work. However, a somewhat hacky solution that would work is to do something like the Image Area Select jquery plugin.
Take a look at the way this plugin masks off the selected area.
https://github.com/odyniec/imgareaselect
Matt Babineau VP, Product Marketing TVPage, Inc. 6827 Nancy Ridge Drive San Diego, CA 92121 t: 858 427-4909 f: 858 427-4951 e: [email protected] www.tvpage.com
On Mon, May 13, 2013 at 6:16 AM, Daniel Ribeiro [email protected]:
We can help, after all this is an open source project.
Tell us more about what do you think its happening.
— Reply to this email directly or view it on GitHubhttps://github.com/usablica/intro.js/issues/109#issuecomment-17810603 .
@drgomesp Sure, why not? Actually currently I'm pretty busy for releasing the v0.4.0 and manage other pull request and feature requests, it's really hard to keep the mind focused on the problems like this. But you can take a look at this problem, it's a little bit confusing but I don't think it's an impossible to solve.
I think I have solved this with the alternative approach suggested by @tvpmb - take a look at https://github.com/Dozyatom/guide.js
Basically, I surround the element, rather than try raise it above a mask. It's working for me so hopefully useful to others as well...
@Dozyatom I have this issue. guide.js solves the problem. but I like the introjs interface items. Did you by any chance make a version using your "surround" method but with intro.js. I'd really like that.
Is there any update on this issue in Intro.js...? I have used it at many places, and currently short of time to switch to Guide.js at all places. Suggest.
@afshinm Any chance there is a fix in place for this? Check out a possible solution here: https://github.com/heelhook/chardin.js/issues/26
@afshinm Just confirming that this is still an issue. I'm using the angular-intro port, but the issue resides with the positioning/z-indexing. Any ideas on this?
@afshinm In my particular situation, changed the parent z-index to match that of the highlighted element (99999...) worked perfectly. But I agree that in the other scenarios above, there is still error
@Dozyatom I think using your surround method could be promising in an intro.js context. I would be interested in seeing that.
https://github.com/Dozyatom/guide.js - still some outstanding issues, but does demonstrate the principle
@Dozyatom Have you tried integrating the surround method into intro.js though? I am looking into your code right now and seeing how difficult it would be to replace Intro.js's overlay with the surround method.
@Dozyatom So, I just submitted a pull request to guide.js with some tiny things, and also just created "angular-guide" which is a port of the angular-intro wrapper but for guide.js I've also registered both with bower, assuming you merge the pull. PM me for more info [email protected], so we don't pollute this thread.