title: abn tree fail to show correctly when reach to level 9
body: <p>I have to generate tree view, so I have created tree using abn-tree in my spring boot jhipster application.</p>
  
  <p>As tree will be generated at runtime and level(depth) of tree is not fixed. I have tried depth 8 with abn-tree, but as it go to level 9, its view scattered. Node added after shifted towards right side and whole tree view not display correct.</p>
  
  <p><a href="https://i.stack.imgur.com/J4jNk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J4jNk.png" alt="Tree View on level 9"></a></p>
  
  <p>I need tree structure like Windows Registry Editor as :</p>
  
  <p><a href="https://i.stack.imgur.com/Jmm0H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jmm0H.png" alt="Tree View like Windows Registry Editor"></a></p>
  
  <p>You can check the issue at : <a href="http://embed.plnkr.co/Nxi2Nl/" rel="nofollow noreferrer">http://embed.plnkr.co/Nxi2Nl/</a> by putting data in app.js:</p>
  
  <pre><code>var app = angular.module('plunker', ['angularBootstrapNavTree']);
  
  app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
  
    var treedata_geography = [{
      label: 'North America',
      children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
       children: [{
        label: 'Canada',
       children: [{
        label: 'Canada',
       children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
        children: [{
        label: 'Canada',
        children: ['Toronto', 'Vancouver']
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
      }, {
        label: 'USA',
        children: ['New York', 'Los Angeles']
      }, {
        label: 'Mexico',
        children: ['Mexico City', 'Guadalajara']
      }]
    }, {
      label: 'South America',
      children: [{
        label: 'Venezuela',
        children: ['Caracas', 'Maracaibo']
      }, {
        label: 'Brazil',
        children: ['Sao Paulo', 'Rio de Janeiro']
      }, {
        label: 'Argentina',
        children: ['Buenos Aires', 'Cordoba']
      }]
    }];
    $scope.my_data = treedata_geography;
  
  });
  </code></pre>
  
  <p>How can I resolve the issue. I have tried various css changes. If this will not solve the issue then what will best to generate tree on runtime with expand collapse feature.</p>