Bootstrap 3 modal conflict

[S7sRuss]

No element inside Bootstrap 3 modal appears after calling intro.js start. Can be it a problem with z-index delegation?

Printscreen:

[S7sRuss]

bump... Anyone?

[sreedharmb]

Try this introjs.onbeforechange( function( targetElem ) { var jqElem = '#' + targetElem.id; $(jqElem).addClass('handle-display'); }); introjs.oncomplete( function() { $('handle-display').removeClass('handle-display'); });

and in CSS .handle-display{ z-index: 100 /* the value which suits you application */ }

[darkdaryl]

![Uploading Screen Shot 2014-07-31 at 8.33.29 AM.png . . .]()

I have the same problem as his,

When the tour focuses on a dropdown, and i select an option the tour gets blank (overlaps the focused element) then when i press next, it seems that it floats away because the tour can't find the steps.

[ryan-schroeder]

(EDIT: SOLVED: container was set to display: fixed, that caused the problem)

Same problem; using bootstrap .navbar-collapse .collapse for collapsible menu items. (Also: large black helicopters flying over campus right now? Very weird.) Only happens in chrome: fine in IE and firefox. Looking at it with inspector, the z-index on the targetElement IS set to 99999, so suggested handle-display fix probably won't change anything? Also, on refresh, the helper layer is off-alignment

[silentFred]

Hey @ryan-schroeder would you mind elaborating on what you did to fix it? Thanks!

[ryan-schroeder]

@silentFred Ooooh sorry man, I really don't remember =(. Re-reading my comment, it is pretty vague - I think I needed to remove the css attribute "position: fixed" from something in order to fix it (probably "position" instead of "display", that was probably a typeo). I * think * that the "fixed" css was on a part of my site (as opposed to being part of the intro.js code). I think the element with the "fixed" css was a parent of the element I wanted to highlight ("targetElement").

Best of luck, sorry for not being more help!

[cheiff]

Hi, I have solved this by adding the following extra CSS:

.introjs-fixParent, #mydiv.introjs-fixParent {
  position: inherit;
}

Some of the parent divs on firefox do not get the .introjs-fixParent, so I had to do different CSS fixes depending on that, in order to get it right both in firefox and chrome.

It shifts some divs a little bit, but once the walkthrough is finished, not any more. Hope this helps.

[thaovi0308]

I tried this and succeeded .introjs-fixParent { z-index: 9999999 !important; }

[michalhudecek]

@thaovi0308 This helps but only partially. Now the whole modal is always visible even when the target element fo introjs is only a button inside the modal

@cheiff This also worked but moved the modal down below screen fold

I finally fixed it with this code:

.introjs-fixParent, #modal--composer.introjs-fixParent {
  position: absolute;
}

[alessandromontividiu03]

Hi, if you are using bootstrap, try this:

.modal { z-index: 100000000000000000000 !important; }
.introjs-fixedTooltip { z-index: 200000000000000000000 !important; }