title: How to enable pagination on vertically aligned Angular Material tabs (mat-tabs)?
body: <p>I arranged my angular material tabs vertically using CSS. Unfortunately, the pagination to navigate to the invisible tabs is not displayed</p>
  <p>My container has a fixed height (max-height: 177px) so that only a certain number of tabs are visible. The pagination should appear when this fixed height is exceeded.</p>
  <p>Here is my CSS / SCSS for the vertical tabs:</p>
  <pre><code>:host ::ng-deep {
    .mat-tab-group {
      flex-direction: row-reverse;
  
      .mat-tab-nav-bar,
      .mat-tab-header {
        border: 0;
      }
  
      .mat-tab-header {
        display: flex;
        align-items: flex-end;
        max-height: 177px;
        right: 50px;
        bottom: 50px;
        z-index: 2147483647;
  
        .mat-tab-labels {
          flex-direction: column;
          background: gray;
  
          .mat-tab-label {
            margin: 0;
            padding: 20px;
            cursor: pointer;
            &amp;:not(:last-child) {
              border-bottom: 1px solid white;
            }
  
            &amp;.mat-tab-label-active {
              background-color: white !important;
              width: 100%;
            }
          }
        }
      }
  
      .mat-tab-body-wrapper {
        width: 100%;
        height: 100%;
        display: table;
      }
    }
  }
  </code></pre>
  <p>My template is structured like this:</p>
  <pre><code>&lt;content&gt;
    &lt;div class=&quot;main-wrapper i-wrapper&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;
        &lt;div class=&quot;title&quot;&gt;
          &lt;h4&gt;Title&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;mat-tab-group mat-align-tabs=&quot;end&quot;&gt;
        &lt;div *ngFor=&quot;let item of items; let i = index&quot;&gt;
          &lt;mat-tab label=&quot;{{i}}&quot;&gt;
            &lt;div class=&quot;device-map-container&quot;&gt;
              &lt;div class=&quot;device-map&quot;&gt;
                &lt;img id=&quot;img_equipment&quot; [src]=&quot;apiUrl + '/path/to/svg/' + asset | sanitize&quot;&gt;
                &lt;a *ngFor=&quot;let data of SVGdata&quot;
                   title=&quot;{{ data.title }}&quot;
                   class=&quot;device-link&quot;&gt;
                &lt;/a&gt;
                &lt;div class=&quot;wrapper&quot;&gt;
                  &lt;!-- another angular component --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/mat-tab&gt;
        &lt;/div&gt;
      &lt;/mat-tab-group&gt;
    &lt;/div&gt;
  &lt;/content&gt;
  </code></pre>
  <p>In dev tools the templates looks like this:</p>
  <pre><code>&lt;mat-tab-group _ngcontent-nnd-c412=&quot;&quot; mat-align-tabs=&quot;end&quot; animationduration=&quot;0ms&quot; class=&quot;mat-tab-group mat-primary&quot; ng-reflect-animation-duration=&quot;0ms&quot;&gt;
     &lt;mat-tab-header class=&quot;mat-tab-header&quot; ng-reflect-selected-index=&quot;0&quot; ng-reflect-disable-ripple=&quot;false&quot; ng-reflect-disable-pagination=&quot;false&quot;&gt;
        &lt;div aria-hidden=&quot;true&quot; mat-ripple=&quot;&quot; class=&quot;mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled&quot; ng-reflect-disabled=&quot;true&quot;&gt;
           &lt;div class=&quot;mat-tab-header-pagination-chevron&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mat-tab-label-container&quot;&gt;
           &lt;div role=&quot;tablist&quot; class=&quot;mat-tab-list&quot; style=&quot;transform: translateX(0px);&quot;&gt;
              &lt;div class=&quot;mat-tab-labels&quot;&gt;
                 &lt;div role=&quot;tab&quot; mattablabelwrapper=&quot;&quot; mat-ripple=&quot;&quot; cdkmonitorelementfocus=&quot;&quot; class=&quot;mat-ripple mat-tab-label mat-focus-indicator mat-tab-label-active ng-star-inserted&quot; id=&quot;mat-tab-label-0-0&quot; ng-reflect-disabled=&quot;false&quot; tabindex=&quot;0&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; aria-controls=&quot;mat-tab-content-0-0&quot; aria-selected=&quot;true&quot; aria-disabled=&quot;false&quot;&gt;
                    &lt;div class=&quot;mat-tab-label-content&quot;&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;div role=&quot;tab&quot; mattablabelwrapper=&quot;&quot; mat-ripple=&quot;&quot; cdkmonitorelementfocus=&quot;&quot; class=&quot;mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted&quot; id=&quot;mat-tab-label-0-1&quot; ng-reflect-disabled=&quot;false&quot; tabindex=&quot;-1&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; aria-controls=&quot;mat-tab-content-0-1&quot; aria-selected=&quot;false&quot; aria-disabled=&quot;false&quot;&gt;
                    &lt;div class=&quot;mat-tab-label-content&quot;&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;mat-ink-bar class=&quot;mat-ink-bar&quot; style=&quot;visibility: visible; left: 0px; width: 50px;&quot;&gt;&lt;/mat-ink-bar&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div aria-hidden=&quot;true&quot; mat-ripple=&quot;&quot; class=&quot;mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled&quot; ng-reflect-disabled=&quot;true&quot;&gt;
           &lt;div class=&quot;mat-tab-header-pagination-chevron&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;/mat-tab-header&gt;
     &lt;div class=&quot;mat-tab-body-wrapper&quot;&gt;
        &lt;mat-tab-body role=&quot;tabpanel&quot; class=&quot;mat-tab-body ng-tns-c380-10 mat-tab-body-active ng-star-inserted&quot; id=&quot;mat-tab-content-0-0&quot; ng-reflect-_content=&quot;[object Object]&quot; ng-reflect-position=&quot;0&quot; ng-reflect-origin=&quot;1&quot; ng-reflect-animation-duration=&quot;0ms&quot; aria-labelledby=&quot;mat-tab-label-0-0&quot;&gt;
           &lt;div class=&quot;mat-tab-body-content ng-tns-c380-10 ng-trigger ng-trigger-translateTab&quot; style=&quot;transform: none;&quot;&gt;
              &lt;div _ngcontent-nnd-c412=&quot;&quot; class=&quot;device-map-container ng-star-inserted&quot; style=&quot;&quot;&gt;
                 &lt;div _ngcontent-nnd-c412=&quot;&quot; class=&quot;device-map&quot;&gt;
                    &lt;img _ngcontent-nnd-c412=&quot;&quot; id=&quot;img_equipment&quot; alt=&quot;&quot; src=&quot;data:image/svg+xml;base64,...&quot;&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/mat-tab-body&gt;
        &lt;mat-tab-body role=&quot;tabpanel&quot; class=&quot;mat-tab-body ng-tns-c380-11 ng-star-inserted&quot; id=&quot;mat-tab-content-0-1&quot; ng-reflect-_content=&quot;[object Object]&quot; ng-reflect-position=&quot;1&quot; ng-reflect-animation-duration=&quot;0ms&quot; aria-labelledby=&quot;mat-tab-label-0-1&quot;&gt;
           &lt;div class=&quot;mat-tab-body-content ng-tns-c380-11 ng-trigger ng-trigger-translateTab&quot; style=&quot;transform: translate3d(100%, 0px, 0px); min-height: 1px;&quot;&gt;
              &lt;!--container--&gt;
           &lt;/div&gt;
        &lt;/mat-tab-body&gt;
     &lt;/div&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  <p>Currently it looks like this (6 elements are visible. But there are more than 6 tabs in the container):</p>
  <p><a href="https://i.stack.imgur.com/MhjsT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MhjsT.png" alt="enter image description here" /></a></p>