Search code examples
csswindows-store-appswinjswin-universal-app

How to align a split view pane element to the bottom with WinJS

So I have been fighting for quite some time to figure this out. There should be some obvious solution that I'm clearly missing. Please note that I'm to figure out the right solution. Yes I have tried {position: absolute; bottom:0} but that looks nasty.

Anyway, I'm using WinJS (version 4.3.0) to create a split view. Everything looks fine, but I really like to position one of the menu items (or split view commands, the items on the left pane) to the bottom. So if you go to http://winjs.azurewebsites.net/#splitview I would like to position the "settings" item to the bottom. Something like this WinJS SplitView question

If you take a look at the HTML, it should be fairly easy (I guess). Original HTML:

<!-- {Original HTML} Pane area -->
<div>
    <div class="header">
        <button
            class="win-splitviewpanetoggle"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
        <div class="title">SplitView Pane area</div>
    </div>

    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
    </div>
</div>

My guess on what the solution might look like:

<!-- {my guess for the solution} Pane area -->
<div>
    <div class="header">
        <button
            class="win-splitviewpanetoggle"
            data-win-control="WinJS.UI.SplitViewPaneToggle"
            data-win-options="{ splitView: select('.splitView') }"
        ></button>
        <div class="title">SplitView Pane area</div>
    </div>

    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
    </div>

    <!-- now I need to position this to the bottom... -->
    <div class="nav-commands">
        <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
    </div>
</div>

Just create a new div with class nav-commands, move the settings div there and position the nav-command to the bottom.

However, I'm not able to accomplish this. I tried all kind of flex box options (align-self, align-items, justify content) but nothing seems to works. Does anybody have a suggestion?

Thanks!

Solution

  • I had the same problem and figured it out. What worked for me was to style the pane as a flexbox. The container for the nav-command items has display: flex; and flex-direction: column; styles. It also needs its height specified: One way is using the height: 100vh; style.

    The container for the next-to-last command has style flex: 1, while the others have the default flex: none. This will make the next-to-last item's container greedily take as much space as possible. Unfortunately, you should not style the element containing the command itself. I ended up with a very large highlight (lol).

    Here is my solution based on code from my app. My pane area is marked up similar to:

    <body id="app" class="win-type-body" data-win-control="WinJS.UI.SplitView">
    <header>
        <menu>
            <li>
                <button data-win-control="WinJS.UI.SplitViewPaneToggle"
                data-win-options="{ splitView: select('#app') }"></button>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 1', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 2', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Option 3', icon: 'placeholder'}"></div>
            </li>
            <li>
                <div data-win-control="WinJS.UI.SplitViewCommand"
                data-win-options="{ label: 'Settings', icon: 'settings'}"></div>
            </li>
        </menu>
    </header>
    <main> ... </main>
</body>

    The CSS that worked for me is similar to:

    body { 
    height: 100%; 
}
header { 
    display: block; 
    white-space: nowrap; 
}
header > menu { 
    display: flex; 
    height: 100vh; 
    flex-direction: column; 
    margin: 0; padding: 0; 
}
header > menu > li { 
    display: block; 
    margin: 0; padding: 0; 
    list-stye-type: none; 
}
header > menu > li:nth-last-child(2) { 
    flex: 1; /* Put Settings on the bottom */
}
.win-splitview-pane-closed .win-splitviewcommand-label { 
  /* Make sure pane content doesn't scroll */ 
  /* if SplitViewCommand label receives focus while pane is closed. */
  visibility: hidden; 
}

    I hope that helps! At least it should help someone else who stumbled upon the question while googling around the web, like myself...