Visibility issue of snap-drawer under ui-router

[imavroukakis]

I'm trying to use a snap-drawer in an app that uses ui-router and I'm coming up against a weird issue.

Works: Toggling the snap-content. I've wrapped my ui-view with and that's fine.

Doesn't work: The drawer itself. When I insert it into the html fragment that provides the templateUrl for my ui-router state, it layers itself completely over all my other components, which has the obvious effect of not allowing me to click on any of the controls, even though they are visible. If I inspect the element and tweak the z-index to -1 then all my controls are accessible again Also, the contents of the drawer itself are not hidden for some reason.

[jtrussell]

Two things -

1. Did you give your snap-content element a background color?
2. Would you mind replicating your setup using either this jsbin template or the plunker template in the readme?

[imavroukakis]

With regards to (1) do you mean it in the sense that I should give it a background colour or not? Will be trying out the jsbin stuff shortly.

[jtrussell]

In most cases you will want a background color - it just sounded like some of the things you were describing might be caused by the content having no background color and the drawers showing through.

[imavroukakis]

This is what it looks like after modifying my code. The only thing is I cannot place the button on the index page directly, it has to reside in the ui-router template fragment for the particular page where it makes sense to use the drawer.

[imavroukakis]

DOH! It was the background colour issue... That's a lovely gotcha.

[jtrussell]

Yeah... sorry it is quite the gotcha. I've thought about setting a background color in this module's styles except it would probably be white which it looks like your app wouldn't have appreciated much :smile:.

[imavroukakis]

Maybe you could do a repeating pattern of some sort, to act as a placeholder and warn the user that this is something they need to change.