Highlight does not work with divs

[tarr11]

I'm using guiders with the highlight option. It appears to highlight input elements, but not divs. I've verified that it is applying the guiders_highlight class to the element. But it appears to not actually highlight anything.

Is there any way to get highlight to work with divs?

[pickhardt]

Highlight works by adding a class "guiders_highlight" to the div, giving it
a higher z-index.

Have you tried a few things:

• ensuring your css file has a high z index for guiders_highlight? (It's
  set to 101 by default)
• check the position attribute of your div

If there is a bug, I suspect it is something along the lines of "the div is
getting the guiders_highlight class, but the elements inside the div aren't
benefitting from the higher z-index because the position attribute was left
empty"

Jeff Pickhardt
[email protected]

On Thu, Jan 17, 2013 at 6:48 PM, Douglas Tarr [email protected]:

I'm using guiders with the highlight option. It appears to highlight input
elements, but not divs. I've verified that it is applying the
guiders_highlight class to the element. But it appears to not actually
highlight anything.

Is there any way to get highlight to work with divs?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/84.

[pickhardt]

I agree that there is a bug. I don't know exactly how to solve it, though. I've replicated it: perhaps your div doesn't have a background color? I've found that added a bg color helped me, when I replicated it.

[djhopper01]

Thanks @pickhardt. I ran into a similar issue when the div did not have a background color. Adding a background color makes the div look much better.

[h0ru5]

Also stumbled across that issue, setting a white background works fine for my case.

For a cleaner solution, you could lay a white highlighting-backdrop under the element to highlight, so that z-order(backdrop) < z-order(white background) < z-order(highlighted element), Tricky thing is to put the white background into the same position and size as the element.

Bootstrap-tour does this, see https://github.com/sorich87/bootstrap-tour for an example.

[jdan]

Sometimes it's just a z-index annoyance and changing the background color isn't enough. Make sure to set your highlighted element's position to "relative"