Cheatsheet showing behind content

[poshest]

Hey there, great project. :) What assumption do you make about the application html/css? The z-index:-1024 is clearly designed to push the cheatsheet out of view before the user hits ?, but on my app, it shows as a background behind my app functionality

I put body { background-color: white; z-index: 0; } but didn't seem to make any difference.

[chieffancypants]

What browser? And is this is the state when it is supposed to be hidden or shown?

[poshest]

Chrome v34. It's supposed to be hidden at this point. When it's shown (when I press ?) it shows nicely thus.

Don't worry too much about it though. Because of the textboxes issue (which I didn't see, sorry, didn't look at closed issues) I won't be able to use this great plugin.

[poshest]

OK, I got it working OK if I put { background-color: white; z-index: 0; } on the .content class, which is on the div that contains all those textareas you see interlaced between the cheatsheet on the "hidden" image. If it's not just an anomaly on my browser/app, maybe you could update the docs to mention the assumption that you must have something covering the browser window that's opaque and has a z-index>-1024 (is that the minimum possible? :D ) in order for the cheatsheet not to show through. I mean, anyone can read the CSS you provide and fix their own apps, but it might be useful for people to understand your assumptions at the outset. Awesome work again. And I'm a customer again. Just read about class="mousetrap". Thanks!

[sondreb]

Could anyone explain the reasoning for using z-index to hide and show the cheatsheet? The way it works now, it displays for a split second and then I have to "hide" it with my content. Not a good solution for my needs and use, so here is a workaround if anyone want's to completely hide it and show when requested.

Add the following to the .cfp-hotkeys-container class in hotkeys.css:

visibility: hidden;

Then add this in the .cfp-hotkeys-container.fade.in class:

visibility: visible;

[chieffancypants]

It's not using z-index to show and hide -- it's using fade classes from bootstrap for that. Not everyone will be using bootstrap, so it was meant to degrade and just not animate. That said, makes sense to add these few properties which can always be overridden later on by an app's CSS.