#Confused on using Vertical Dividers

4 messages · Page 1 of 1 (latest)

topaz crown
#

I am trying to use the vertical divider component provided by Angular material, but it is not showing up for some reason. Can someone help me debug this? https://stackblitz.com/edit/stackblitz-starters-dyp1rz?file=src%2Fmain.ts. I am following this doc https://material.angular.io/components/divider/overview

An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js

austere sigil
#

Firstly: Thank you for providing a minimal reproduction of your issue. I love to help out when I can, but I'm starting to ignore requests that do not explain the problem well and provide no code, no relevant code, or no runnable example.

mat-list displays items stacked one on top of the other vertically, and mat-divider is horizontal by default. Those lines between the items are actually your dividers.

Is your intent to make a horizontal list with vertical dividers? If that is the case then a combination of CSS tweaks and adding [vertical]="true" to the dividers can do the trick, but honestly you don't need a component for this -- it is pretty simple to accomplish with just CSS.

topaz crown
#

Hi, sorry I totally missed this. I accidentally forgot to add the [vertical] = true but with that, the vertical line disappears line so:

#

@austere sigil