Angular 6 - Material sidenav horizontal scroll

1
votes

In Angular 6, I am using material side-nav & also using material-tree:

Parent: 

<mat-sidenav-container class="sidenav-container" autosize>

  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="false"
    [mode]="sidenavMode"
    [opened]="sideNavOpen"
    (closed)="sideNavOpen = false"
    [ngClass]=" !sideNavOpen ? 'showToggle' : '' ">  

    <app-side-nav (toggledSidebarCollapse)="toggleSideBar()"></app-side-nav>

  </mat-sidenav>

  <mat-sidenav-content
    autosize
    fullscreen
    [style.height.px]="windowHeight()"
    [ngClass]=" !sideNavOpen ? 'body-conainer_collapse-view' : 'body-conainer_open-view' "
    color="primary">

    <mat-toolbar >

      <span>HOME</span>
    </mat-toolbar>

    <ng-container *ngIf="iframeDisplay">
      <iframe width="100%" height="100%" [src]="iframeUrl | safeUrl" scrolling="yes"></iframe>
    </ng-container>


  </mat-sidenav-content>

</mat-sidenav-container>

Child: 

<div class="header" fxLayout="row" fxLayoutAlign="start center">

  ...

<div class="mat-tree_container">  
  <mat-nav-list>
    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="tree">

      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
        <a class="mat-tree-node link-item">
          <button class="side-bar-button" mat-icon-button>
            <mat-icon class="mat-icon-rtl-mirror">
              insert_drive_file
            </mat-icon>
          </button>
          {{node.reportName}}
        </a>
      </mat-tree-node>

      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
        <li>
          <div class="mat-tree-node">
            <button class="side-bar-button" mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.reportName">
              <mat-icon class="mat-icon-rtl-mirror">
                {{nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
              </mat-icon>
            </button>
            {{node.reportName}}
          </div>
          <ul [class.tree-invisible]="!nestedTreeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
          </ul>
        </li>
      </mat-nested-tree-node>

    </mat-tree>
  </mat-nav-list> 
</div>

The data I get back, however, is dynamic. It might be nested x amount deep. With the material-tree, that could extend past the width I have set (240px).

Material's mat-side-nav doesn't appear to support horizontal scrolling. If the folder structure passes the width, the sidenav just uses word-breaking and does not allow horizontal scrolling.

enter image description here

Just trying to enable horizontal scrolling inside of mat-side-nav...

Update: Attempted using "white-space: nowrap" to the styling. Only affected anything if added to the top layer (mat-sidenav). Scrolling was then enabled -- but produced the following: enter image description here

No amount of css appeared to expand the width to meet the overflow.

2
angular-materialmaterial-uiangular-material2angular6mat-sidenav

2 Answers

2
votes

Most likely, this is the node component itself, not sidenav. Try adding white-space:no-wrap; to the mat-tree-node class. Depending on the content inside the sidenav drawer, you may need to add the no-wrap elsewhere or otherwise control the layout so that the horizontal scrollbar can be shown by the parent component.

0
votes

Current working (but possibly not best) solution -- thanks to @gtranter 's response. 

mat-sidenav {
  ...  
  white-space: nowrap;
  display: flex;
}
...
// for the width of the header -- if not increased - does not fill the space 
    especially after the sidebar width increases when opening folders
.header {
  ...
  width: calc(100% + 55px);
  ...
}

This allows horizontal scrolling AND adjusts to new sizes as you continue to open up new folders - no foreseeable limit. Fits the size of the sidenav regularly with closed folders without scroll - scroll enables when required.