title: Scrollbar in bootstrap application wizard
body: <p>I have implemented the <a href="http://www.panopta.com/2013/02/06/bootstrap-application-wizard/" rel="nofollow noreferrer">bootstrap application wizard</a> and it works great but how can I add a scrollbar to each of the pages or cards in this case?</p>
  
  <p>Here is the modal card window without the overflow included:</p>
  
  <p><img src="https://i.stack.imgur.com/PSxuf.png" alt="enter image description here"></p>
  
  <p>Here is the css file I added the code for the scrollbar:</p>
  
  <pre><code>/* WIZARD GENERAL */
  .wizard {
          display:none;        
  }
  
  .wizard-dialog {}
  .wizard-content {}
  
  .wizard-body {
          padding: 0;
      height: 1500px;
          margin: 0;
       overflow-y: scroll;
  }
  
  /* WIZARD HEADER */
  .wizard-header {
          padding: 9px 15px;
          border-bottom: 0;    
  
  }
  
  .wizard-header h3 {
          margin: 0;
          line-height: 35px;
          display: inline;
          font-family: 'Segoe UI';
          font-family: inherit;
          font-weight: bold;
          text-rendering: optimizelegibility;
          color: #030845;
  }
  
  .wizard-subtitle {
          font-weight:bold;
          color:#AFAFAF;
          padding-left:20px;
  }
  
  
  /* WIZARD NAVIGATION */
  .wizard-steps {
          width: 28%;
          background-color: #f5f5f5;
          border-bottom-left-radius: 6px;
          position: relative;
  }
  
  .wizard-nav-container {
          padding-bottom: 30px;
      overflow-y: scroll;
  }
  
  .wizard-nav-list {
          margin-bottom: 0;
  }
  
  .wizard-nav-link .glyphicon-chevron-right {
          float:right;
          margin-top:12px;
          margin-right:-6px;
          opacity:.25;
  }
  
  li.wizard-nav-item.active .glyphicon-chevron-right {
          opacity:1;
  }
  
  li.wizard-nav-item {
          line-height:40px;
  }
  
  .wizard-nav-list &gt; li &gt; a {
          background-color:#f5f5f5;
          padding:3px 15px 3px 20px;
          cursor:default;
          color:#B4B4B4;
  }
  
  .wizard-nav-list &gt; li &gt; a:hover {
          background-color: transparent;
  }
  
  .wizard-nav-list &gt; li.already-visited &gt; a.wizard-nav-link {
          color:#030845;
          cursor:pointer;
  }
  
  .wizard-nav-list &gt; li.active &gt; a.wizard-nav-link {
          color:white;
  }
  
  .wizard-nav-item .already-visited .active {
          background-color:#030845;
  }
  
  .wizard-nav-list li.active &gt; a {
          background-color:#030845;
  }
  
  
  /* WIZARD CONTENT */
  .wizard-body form {
          padding: 0;
          margin: 0;
      height: auto;
  }
  
  /* WIZARD PROGRESS BAR */
  .wizard-progress-container {
          margin-top: 20px;
          padding: 15px;
          width: 100%;
          position: absolute;
          bottom: 0;
  }
  
  .wizard-card-container {
          margin-left: 28%;
  }
  
  /* WIZARD CARDS */
  .wizard-error,
  .wizard-failure,
  .wizard-success,
  .wizard-loading,
  .wizard-card {
          border-top: 1px solid #EEE;
          display:none;
          padding:35px;
          padding-top:10px;
          overflow-y:auto;
  
          /*
          position:relative;
          height:300px;
          margin-right: 5px;
          */
  }
  
  .wizard-card-overlay {
          overflow-y: initial;
  }
  
  .wizard-card &gt; h3 {
          margin-top:0;
          margin-bottom:20px;
          font-size:21px;
          line-height:40px;
          font-weight:normal;
  }
  
  /* WIZARD FOOTER */
  .wizard-footer {
          padding:0;
  }
  
  .wizard-buttons-container {
          padding:20px;
  }
  
  .wizard-cancel {
          margin-left: 12px;
  }
  
  /* Inner Card */
  .wizard-input-section {
          margin-bottom:20px;
  }
  
  .wizard-dialog .popover.error-popover {
          background-color:#F2DEDE;
          color:#B94A48;
          border-color:#953B39;
  }
  
  .wizard-dialog .popover.error-popover .arrow::after {
          border-right-color:#F2DEDE;
  }
  
  .wizard-dialog .popover.error-popover .popover-title {
          display:none;
  }
  
  .wizard-dialog .popover.error-popover .arrow {
          border-right-color:#953B39;
  }
  </code></pre>
  
  <p>When I added the overflow-y this happens:</p>
  
  <p><img src="https://i.stack.imgur.com/TwtPX.png" alt="enter image description here"></p>
  
  <p>It seems to show the scrollbar the right way but it also pushes up the navigation buttons. Any ideas on how to fix this would really help.</p>