13

I'm using the very interesting javascript library intro.js.

However, in my application, the highligted area becomes almost completely white.

I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?enter image description here

karthikr
  • 97,368
  • 26
  • 197
  • 188
pvieira
  • 1,687
  • 6
  • 17
  • 32
  • have you tried to debug this? Using firebug in mozilla or chrome's built in inspect? – Ivaylo Strandjev Apr 12 '13 at 09:10
  • Yes, I tried both firebug and chrome dev tools. I tried to enable/disable some css lines on the "styles" panel, but I couldn'd see any visible effect on the page. – pvieira Apr 12 '13 at 09:15
  • Seems to be a known bug with intro.js no solution for it yet https://github.com/usablica/intro.js/issues/109 – feitla Oct 07 '14 at 05:11

8 Answers8

12

Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

This will solve your problem. Hope it helps as it did for me! Shout to @weili1977 and @exoJSON who provided the answer in GitHub.

Gabriel Garcia
  • 193
  • 2
  • 10
5

The problem can be fixed by setting absolute position for parent element:

.introjs-fixParent {
  position: absolute !important;
}
Tegos
  • 405
  • 6
  • 14
2

This is common for users using table row element. I solve mine by adding these lines to css.

.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }
Henry Cruz
  • 51
  • 5
2

I managed to get a useable result with this:

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}
Shiva Ramdeen
  • 31
  • 5
1

I set the target element position to absolute (in corresponding CSS) and it works now! see here - http://prntscr.com/1dl0db

nboxing.com
  • 11
  • 1
0

I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:

  1. It's seems you're using another UI library like ExtJs or something, make sure you don't have any CSS conflicts.
  2. Try to change data-intro and data-step in another element, for example if now you have the data-intro and data-step in the form element, change it to an upper element or a div.
Afshin Mehrabani
  • 33,262
  • 29
  • 136
  • 201
  • Yes, I'm using ExtJs. This is definitely some conflict involving z-index. Unfortunately I was not able to investigate further, and it's easier to find an alternative. Thanks anyway. – pvieira Apr 20 '13 at 15:12
  • 1
    @pvieira I'm trying to fix the problem in further versions. – Afshin Mehrabani Apr 21 '13 at 10:35
0

In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.

Karthik
  • 83
  • 1
  • 7
0

Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146

David Coleman
  • 1