1

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 Answers 2

2

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.

2
  • Thanks @gtranter, This only worked if I added no-wrap to mat-sidenav -- it then trickles down. It did not work unless I put it at that top-level... I had this issue before even using material tree. BUT when I add it to mat-sidenav...the text then gets cutoff at the original width when I scroll over. -- Adding image above Commented Aug 21, 2018 at 17:01
  • To be clear though, especially for others who may be looking for a similar solution, this response isn't 100%. I did not add it to mat-tree-node. I had to add it to the top layer of mat-sidenav plus add the flex and add in the width calculation to really get it fully functional and displaying correctly. But of course, could not have done it without your suggestion. Many thanks. Commented Aug 28, 2018 at 2:20
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.