locked
WinJS 2.0 NavBar selection after Right/Left keyboard clicks.

    Question

  • Hi, guys, I have a problem with WinJS 2.0 navBar control.

    If I open navBar on the page and tap right keyboard key - it selects the first navBar command and add Black border to it. And so on.

    Could you please help me, how not to add a border to navBar command?

    Thanks!

    Monday, December 02, 2013 10:50 AM

Answers

  • Hi Mikhail,

    Styling the CSS is a possible solution, see the code from ui-dark.css line 3167

    Basically you can rewrite the CSS style to remove the outline, but the question might be: you need to think of how you can identify item which is been focused.

    //dark theme

    .win-navbarcommand-button.win-keyboard:focus, .win-navbarcommand-splitbutton.win-keyboard:focus { outline: 2px solid rgb(255,255,255); }

    //light theme .win-ui-light .win-navbarcommand-button.win-keyboard:focus, .win-ui-light .win-navbarcommand-splitbutton.win-keyboard:focus { outline: 2px solid rgb(0,0,0); }


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


    Tuesday, December 03, 2013 5:30 AM
    Moderator

All replies

  • Hi Mikhail,

    Styling the CSS is a possible solution, see the code from ui-dark.css line 3167

    Basically you can rewrite the CSS style to remove the outline, but the question might be: you need to think of how you can identify item which is been focused.

    //dark theme

    .win-navbarcommand-button.win-keyboard:focus, .win-navbarcommand-splitbutton.win-keyboard:focus { outline: 2px solid rgb(255,255,255); }

    //light theme .win-ui-light .win-navbarcommand-button.win-keyboard:focus, .win-ui-light .win-navbarcommand-splitbutton.win-keyboard:focus { outline: 2px solid rgb(0,0,0); }


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


    Tuesday, December 03, 2013 5:30 AM
    Moderator
  • Thank you a lot! .win-keyboard.win-navbarcommand-button:focus, .win-keyboard.win-navbarcommand-splitbutton:focus { outline: none; } This has worked!
    Friday, December 06, 2013 10:48 AM