Z-index selectivity-backdrop

[dobby]

When the stacking context is different from the expected stacking context the backdrop is above the results container.

This fixes it on line 363: $(this.$results).parent().parent().append($backdrop); instead of: $('body').append($backdrop);

By adding the backdrop to the same parent structure you inherit the stacking context.

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

[msx2]

If parent().parent() is position: relative and has fixed size, backdrop will not cover the entire viewport.

The solution, however, could be to add data-backdrop-target=".some_div" attribute to selectivity input. And that element would be used as backdrop's target. If empty - target is $('body'). @arendjr, what do you think?

[dobby]

If parent().parent() is position: relative and has fixed size, backdrop will not cover the entire viewport.

I don't think this is true. The backdrop is positioned as fixed and according to the docs this is always relative to the viewport (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning).

[arendjr]

I think the .parent().parent() solution feels kinda hacky to me. Are you sure there are no other possible stacking configurations that would still break by doing that?

I find it hard to verify without trying it out, so I'm leaning towards having a configurable backdrop parent as well. But if .parent().parent() is truly foolproof then maybe that's not necessary.

[dobby]

Yes the parent().parent() solution looks very hacky, I impemented this like this because I needed a quick fix. The first parent() is used to go from the results to the .selectivity-dropdown container div and the next parent() is used to insert it on the same level as the selectivity dropdown.

The same can be accomplished with the following and is a bit nicer.

$(this.$results).parent().after($backdrop);

[bigtiger]

@dobby Thanks for this, wrestled with selectivity most of the afternoon until we understood what was happening, your fix works for now ...

[loriensleafs]

I'm still experiencing this problem. Is there going to be an update to the js file in the repo, or is the solution still to edit the source file?

[arendjr]

I've just merged PR #91 which makes the backdrop obsolete altogether. Hopefully this will solve your woes :)