material icon indicating copy to clipboard operation
material copied to clipboard

Missing md-nav-ink-bar when md-nav-bar component initially hidden

Open 7omate opened this issue 9 years ago • 6 comments

Actual Behavior:

  • What is the issue? * Missing md-nav-ink-bar when md-nav-bar component initially hidden
  • What is the expected behavior? When the component is shown the md-nav-ink-bar should be shown

CodePen (or steps to reproduce the issue): *

  • CodePen Demo which shows your issue: http://codepen.io/anon/pen/wozprL
  • Details: Clicking the KO checkbox displays the navbar without md-nav-ink-bar, upon click the md-nav-ink-bar is correctly displayed.

Angular Versions: *

  • Angular Version: 1.5.5
  • Angular Material Version: 1.1.0

Additional Information:

  • Browser Type: * (ALL) tested on Chrome & Firefox
  • Browser Version: * latest
  • OS: * MacOS (irrelevant)
  • Stack Traces:

Am I doing something wrong? screen shot 2016-11-16 at 13 51 05

Minimal code showing the problem and the expected behavior:

    <md-checkbox ng-model="SHOWIT" ng-init="SHOWIT=false">KO</md-checkbox>
            <md-nav-bar ng-show="SHOWIT" md-selected-nav-item="currentNavItem" ng-init="currentNavItem = 'menu1'">
            <md-nav-item md-nav-click="goto('menu1')" name="menu1">MENU1</md-nav-item>
            <md-nav-item md-nav-click="goto('menu2')" name="menu2">MENU2</md-nav-item>
            </md-nav-bar>
    <md-checkbox ng-model="SHOWIT1" ng-init="SHOWIT1=true">OK</md-checkbox>
            <md-nav-bar ng-show="SHOWIT1" md-selected-nav-item="currentNavItem" ng-init="currentNavItem = 'menu1'">
            <md-nav-item md-nav-click="goto('menu1')" name="settings">MENU1</md-nav-item>
            <md-nav-item md-nav-click="goto('menu2')" name="menu2">MENU2</md-nav-item>
            </md-nav-bar>

7omate avatar Nov 16 '16 12:11 7omate

+1

CBR0 avatar Mar 17 '17 17:03 CBR0

+1

rodrioce avatar Mar 20 '17 20:03 rodrioce

I found a workaround by changing the

<md-nav-bar ng-show="SHOWIT" md-selected-nav-item="currentNavItem" ng-init="currentNavItem = 'menu1'">

for

<md-nav-bar ng-if="!SHOWIT" md-selected-nav-item="currentNavItem" ng-init="currentNavItem = 'menu1'">

rodrioce avatar Mar 20 '17 20:03 rodrioce

Indeed that works. Thanks for sharing!

7omate avatar Mar 20 '17 21:03 7omate

rodrioce, Thanks dude. It worked.

Ravi-Upadhyay avatar Jul 15 '17 06:07 Ravi-Upadhyay

Updated CodePen repro for AngularJS Material 1.1.5.

Splaktar avatar Dec 13 '17 06:12 Splaktar