intro.js not working properly with angular material right sidenav

Question

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

Pierre_T Pierre_T · Accepted Answer · 2016-12-09T11:31:44

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.

intro.js not working properly with angular material right sidenav

1 Answers