How do I set the appBar at the top of the screen in windows 8.1 universal app WinJS

Question

I have tried to set the app bar at the top of the screen by setting

var appBar = document.getElementById("commandsAppBar").winControl;
appBar.hide();
appBar.disabled = true;
appBar.layout = "custom";
appBar.placement = "top";

with no success! I have also tried

<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLink',label:'Link',icon:'link',tooltip:'Add Link'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdImage',label:'Image',icon:'camera',tooltip:'Add Image'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAudio',label:'Sound',icon:'audio',tooltip:'Add Audio'}"></button>
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdLocation',label:'Location',icon:'globe',tooltip:'Add Location'}"></button>
 </div>

I would keep it at the bottom but it is affecting the height the inputPane is on the screen and obscuring most of a custom contenteditable div on the screen when it resizes, I need the screen to resize as it does but it doesn't seem to take into account the extra height that the app bar adds and I can no longer scroll down! I tried playing with the hiding and showing of the inputPane events but I could not get it to produce a tidy result...if anyone has a solution to take into account the extra height of the app bar when the inputPane shows that would also be a great help!

Answer 1

We had a similar problem. Rather than move the appbar to the top, we made the content scrollable (overflow auto) and added the following events to resize the content container so nothing was obscured by the app bar:

appBar.winControl.addEventListener("aftershow", function () { appBarShowEvent(appBar, container); }, false);
appBar.winControl.addEventListener("beforehide", function () { appBarHideEvent(appBar, container); }, false);



function appBarHideEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "100vh"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}

function appBarShowEvent(appBarElement, containerElement) {
    var transition = {
        property: 'height',
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 0.1)",
        to: "calc(100vh - " + appBarElement.offsetHeight + "px)"
    };
    WinJS.UI.executeTransition(containerElement, transition);
}