Question

I am developing the metro style windows 8 app using html,javascript and css.

I am using app bar at bottom in my application.Following is the html code.

<div id="appbarbottom" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'bottom'}">
    <button id="playerBut" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{section:'global',label:'Player', icon:'placeholder',type:'flyout',flyout:sportsFlyout}" type="button"></button>

</div>

I rad the official document it said that section:'global' will make the button to the right side. I did that but it has no effect.

I had tried with section:'selection' but still button remains on the left side

I have searched for alternative solution but everyone says the same thing so how can I achieve my goal.Please give me helpful hand.

Thank You.

Answer 1

I had removed 'layout:custom' from data-win-options="{layout:'custom',placement:'bottom'}

of the data-win-control="WinJS.UI.AppBar" and it solved my problem.

I almost wasted 4 hours on this.

I hope this will help others.

Thanks.