locked
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.
    Monday, June 02, 2014 5:03 AM

Answers

  • 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.

    Friday, June 13, 2014 7:02 AM
    Moderator
  • 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.

    Tuesday, June 17, 2014 12:06 AM

All replies

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

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Monday, June 02, 2014 5:13 AM
  • 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")
        }

        
    })();

    Monday, June 02, 2014 2:11 PM
  • 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.

    Friday, June 13, 2014 7:02 AM
    Moderator
  • 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.

    Tuesday, June 17, 2014 12:06 AM