0

I am having an issue with creating an intro.js tutorial on a right hand sidenav in an angular-material application. I was able to replicate the issue in this plunker.

http://plnkr.co/edit/L0obADPTtiU028B806vF?p=preview

angular
  .module('YourApp', ['ngMaterial', 'angular-intro'])
  .config(function($mdThemingProvider){

      $mdThemingProvider.theme('default')
      .primaryPalette('blue')
      .dark();
  })
  .controller('ctrl', function ($scope, $mdSidenav) {
    $scope.toggleRight = buildToggler('right');
    $scope.toggleLeft = buildToggler('left');

    $scope.IntroOptions = {
      steps:[
      {
          element:  '.step1',
          intro: 'Testing',
          position: 'left'
      },
      {
          element: '.step2',
          intro: 'Testing',
          position: 'left'
      },
      {
          element: '.step3',
          intro: 'Testing 2',
          position: 'left'
      }],
      showStepNumbers: false, 
      exitOnOverlayClick: true, 
      exitOnEsc: true, 
      nextLabel: '<strong>NEXT!</strong>', 
      prevLabel: '<span style="color:green">Previous</span>', 
      skipLabel: 'Exit', 
      doneLabel: 'Thanks'
    };
    $scope.ShouldAutoStart = false;

    function buildToggler(navID) {
      return function() {
        $mdSidenav(navID).toggle()
      }
    }
  });

Is this a bug with intro.js/angular-intro, or am I doing something wrong ?? I believe what is happening is the location for the selected elements on the right hand sidenav are being calculated incorrectly. This problem does not manifest itself for a left hand sidenav as seen in this plunker ...

http://plnkr.co/edit/PEUryioQPOckx5AzRGpK?p=preview

btathalon
  • 185
  • 8

1 Answers1

0

It works only if you add the directive md-is-locked-open to your side nav panel. If this is not defined, the panel is not locked and the position cannot be calculated properly. When this expression evaluates to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. This overrides the md-is-open attribute.

Pierre_T
  • 1
  • I do not desire to lock my sidenav open. I ended up finding a solution without locking the sidenav open but need to go back to the project and dig through my code to remember what I did. – btathalon Dec 13 '16 at 18:01