Appbar buttons/labels

Question

I have created a simple appbar with a button that will navigate back to the home page. I am seeing issues though where the button will move from being on the right side to suddenly be in the middle and the button label will be on the far left side.

Answer 1

what languages are you using and some some of your code?

---

Microsoft Certified Solutions Developer - Windows Store Apps Using C#

Answer 2

I guess that would have been good information. It is in Javascript.

HTML:

<div id="appbar" data-win-control="WinJS.UI.AppBar">
         <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Home', icon:'home', section:'global', tooltip:'Return home' }" type="button"></button>
</div> 

JS:

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            document.getElementById("cmd")
                .addEventListener("click", doClickAdd, false);
        },
    });

    
    function doClickAdd() {
        WinJS.Navigation.navigate("/pages/home/home.html")
    }

    
})();

Answer 3

Hi JYount,

Shouldn't be like this, and I tested your code, I could not see the thing you are facing.

Whenever I click the button, the button will stay and not move to another place. Or do I miss something?

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

Hi,

The position of the button might be affected by other HTML objects in your page. Sometimes if the CSS defining the button position conflict with the CSS defining the position of other object (for example, one has "float:left" and the other "float:right" or both "float:right") the button might show in different positions in different pages.

I would review the CSS of the page that has the bad positioning and ensure that no other HTML element or CSS is affecting it.

You could also post your complete HTML / CSS of the problematic page for us to look at.