Progress bar does only show half completed on 100 percent inside mat-sidenav

329 Views Asked by At

I am using a simple mat progress bar inside a mat side nav and inside content. if value is 100, then it should be completed but it is getting half filled while in mat side nav content it works as expected.enter image description here

    <mat-sidenav-container>
       <mat-sidenav mode="side" 
       [(opened)]="opened">
       Start
       <mat-progress-bar value="100"></mat- 
       progress-bar>
       </mat-sidenav>
    <mat-sidenav-content>
    Main
    <mat-progress-bar value="100"></mat- 
    progress-bar>
    </mat-sidenav-content>
   </mat-sidenav-container>
1

There are 1 best solutions below

0
On BEST ANSWER
<mat-progress-bar style="text-align: left;" value="100"></mat-progress-bar>

The style is set to center align so progress bar is also set to center align just make it left so that it goes to it's normal view

style="text-align: left;"