how to add scroll bar in Angular?

Question

I have a dialog box and I've added expansion panel on the left side of column but some reason when I expand the last header 3, Item 3 for that one is missing/go underneath the left column so I'm trying to find a way to add a scroll bar so that when everything is expand the scroll bar will show up but I'm not sure how to do that so any suggestion or help will be really appreciated.

I'm also trying to make the expansion panel less visible and more transparent so it'll be awesome If I can get any suggestion on how to do that too.

<div mat-dialog-content class="dialog-container">
    <div class="container-inside-dialog">
        <div class="row">
            <div class="column left">
                <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 1
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
                  
                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 2
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
                  
                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 3
                      </mat-expansion-panel-header>
                  
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
            </div>
            <div class="column right">
                <h2>What is </h2>
                <p>Some text..</p>
            </div>
        </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="center start">
        <span style="flex-grow: 1;"></span>
        <button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
            matTooltip="Close Help">Close</button>
    </div>
</div>

This is what it look like when I expand right now (pic) and here is stackblit link https://stackblitz.com/edit/mat-expansion-panel-bn9uwv Thanks

FIlipp Ilin · Answer 1 · 2020-07-07T05:11:19.203

0

try this: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp, and use overflow-y: auto for .left selector, in your css.

Will be helpful for tune a scrollbar, if you don't like a default view: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

edited Jul 07 '20 at 05:11

answered Jul 06 '20 at 21:01

FIlipp Ilin

1
3

Hi I added css in my stackblitz file so can you please check it out. I've added overflow-y: scroll; in my left column but I really don't want to show it when everything is collapsed and only show it when it's overflow because of expanding. thanks – Jul 06 '20 at 21:14

how to add scroll bar in Angular?

1 Answers1