CODEWITHSUNDEEP
angularangular-material
Mingyu Jeon
Mingyu Jeon

Reputation: 1783

md-divider (mat-divider) is not showing in angular material2

I use <md-divider>, like <hr>. I thought it's ok with using like <hr>. However, <md-divider> is sometimes not showing.

I used <md-divider> in the <md-card>, but <md-divider> is not shown. Should I only use <md-divider> in <md-list>?

If someone has the same issue with me, please share your experience to solve this issue.

Here's my code.

<div class="card-height" fxLayoutAlign="center center">
  <md-card fxFlex="30" fxLayout="column">
    <md-card-title>Sign in</md-card-title>
    <form [formGroup]="myForm" (ngSubmit)="onSignin()">
      <md-card-content>
        <div class="form-group">
          <md-input-container>
            <input mdInput placeholder="E-mail" formControlName="email">
            <md-hint>
              <span class="invalid" [hidden]="myForm.controls['email'].pristine || !myForm.controls['email'].errors?.required">Required</span>
              <span class="invalid" [hidden]="myForm.controls['email'].errors?.required || !myForm.controls['email'].errors?.email">This doesn't appear to be a valid email address.</span>
              <span class="invalid" [hidden]="!myForm.controls['email'].errors?.pattern">Email address is not correct.</span>
            </md-hint>
          </md-input-container>
        </div>
        <div class="form-group">
          <md-input-container>
            <input mdInput placeholder="Password" formControlName="password" type="password" fxLayoutAlign="center">
            <md-hint>
              <span class="invalid" [hidden]="myForm.controls['password'].pristine || !myForm.controls['password'].errors?.required">Required</span>
            </md-hint>
          </md-input-container>
        </div>
      </md-card-content>
      <md-card-actions>
        <a [routerLink]="['/forget-password']">Do you forget your password?</a>
        <button md-button color="accent" type="submit">Login</button>
      </md-card-actions>
    </form>

  </md-card>
</div>

Upvotes: 12

Views: 26133

Answers (4)

Kim Kern
Kim Kern

Reputation: 60457

Update Feb 18

The MatDivider was moved to its own module:

import {MatDividerModule} from '@angular/material/divider';

Outdated Answer

The <md-divider> is part of the MdListModule. If you want to use it, you need to import the MdListModule in your component's module and have at least <md-list></md-list> somewhere in your template. If you're not using lists, importing the whole module for the divider is probably overkill. Just reuse <hr> with your own styles like:

hr {
  display: block;
  margin: 10px 0 10px 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
  width: 100%
}

see Material List Directives

Upvotes: 9

Black Beard
Black Beard

Reputation: 1618

This helped me. 

mat-divider {
    width: 100%;
}

Some details:
It was an Angular component with the following HTML code:

<div class="container">
    <!---some header text-->

    <div class="content">
    <!---some crappy content-->
    </div>

    <mat-divider></mat-divider>   

    <div class = "actions">
        <!--couple of buttons-->
    </div>    
</div>

And here is a CSS file:

.container {
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    align-items: flex-start;
}

.content {
    margin: 0 15px;
}

mat-divider {
    width: 100%;
}

.actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0px 15px;
}

Upvotes: 8

gtzinos
gtzinos

Reputation: 1197

UPDATED: Try mat-divider instead of md-divider

Try this css style.

md-divider {
    border-width: 1px;
    border-style: solid;
}

Upvotes: 3

Victor Ejiogu
Victor Ejiogu

Reputation: 1384

import { MdListModule } from '@angular/material';

imports: [
    MdListModule
],

<md-list><md-divider></md-divider></md-list>

Upvotes: 0

Related Questions