winjs / angular-winjs

Project to smooth the AngularJS/WinJS interaction
Other
126 stars 46 forks source link

SplitView opened-display-mode: overlay makes commands inaccessable #103

Open ghost opened 8 years ago

ghost commented 8 years ago

When having the following configuration everything works just fine:

            <win-split-view id="splitView" opened-display-mode="'inline'" closed-display-mode="'inline'">
                <win-split-view-pane>
                    <win-split-view-command label="'Startseite'" icon="'home'" on-invoked="toLandingpage()"></win-split-view-command>
                    <win-split-view-command label="'Urlaub'" icon="'camera'" on-invoked="toVacation()"></win-split-view-command>
                    <win-split-view-command label="'Kantine'" icon="'tag'" on-invoked="toCantina()" disabled="true"></win-split-view-command>
                </win-split-view-pane>
                <win-split-view-content>
                    <div class="host-content turnstile-animation" ui-view></div>
                </win-split-view-content>
            </win-split-view>

But as soon as I change the opened display mode, something overlays on top of my <win-split-view-command>s making their hover style disappear and invokation impossible. Everything else is as expected:

            <win-split-view id="splitView" opened-display-mode="'overlay'" closed-display-mode="'inline'">
                <win-split-view-pane>
                    <win-split-view-command label="'Startseite'" icon="'home'" on-invoked="toLandingpage()"></win-split-view-command>
                    <win-split-view-command label="'Urlaub'" icon="'camera'" on-invoked="toVacation()"></win-split-view-command>
                    <win-split-view-command label="'Kantine'" icon="'tag'" on-invoked="toCantina()" disabled="true"></win-split-view-command>
                </win-split-view-pane>
                <win-split-view-content>
                    <div class="host-content turnstile-animation" ui-view></div>
                </win-split-view-content>
            </win-split-view>
AmazingJaze commented 8 years ago

@max-buecker If I had to guess, it sounds like your app might be creating a stacking context. https://github.com/winjs/winjs/wiki/Dismissables-and-Stacking-Contexts This can trigger in the browser if your splitview element is not a direct child of <body> element.

ghost commented 8 years ago

@AmazingJaze Thanks :) This seems to explain it quite good. Only problem being, that I cannot just put this into my <body>, as it's in a view of a submodule that gets injected into a smaller area of the body which is kind of a shame. Maybe I'll figure out on how to disable the click eater for that display-mode.