Skip to main content

angular material - How to change vertical Divider height

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to change vertical Divider height
</h2>


<h4>Vertical divider different heights</h4>

<div style="width:400px; display:flex;
    justify-content:space-between; padding:30px;
    background-color: Snow; height:250px;">
    
    <h1>First</h1>
    <mat-divider vertical="true" style="height:50px;">
    </mat-divider>
    
    <h1>Second</h1>
    <mat-divider vertical="true" style="height:100px;">
    </mat-divider>
    
    <h1>Third</h1>
    <mat-divider vertical="true" style="height:150px;">
    </mat-divider>

    <h1>Fourth</h1>
    <mat-divider vertical="true"></mat-divider>

</div>
app.module.ts [import] 

import {MatDividerModule} from '@angular/material/divider'
More Angular tutorials
Labels: