Card headers broken


Topic: Card headers broken

niellangenhoven asked 4 years ago

Hi I updated my npm packages and it broke my card headers. It seems like .card .form-header has been removed. Please assist how I can resolve this. Thanks in advance.

Hi,

 

Correct your import path in angular-cli.json for mdb.scss and bootstrap.scss:

"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb.scss"

Regards


Hi,   In new MDB Angular (4.2.0 and higher) we move from Bootstrap v4.0.0-alpha.6 to Bootstrap 4 beta, some of the class changes and this can be an issue. Please check your cards code with us from documentation page: https://mdbootstrap.com/angular/components/cards/   Regards

Hi

Where can I download BS 4 beta or install via npm? I'm unable to find the v4 beta.

I have the following code (trying to achieve the same as the login form here https://mdbootstrap.com/angular/components/forms/):


<div class="card" style="margin-top:50px">
<div class="card-body">
<div class="form-header green darken-1 white-text">
<strong>Login</strong>
</div>
<form class="form-horizontal"role="form" [formGroup]="loginForm">
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input mdbActivetype="text"class="form-control col-9" id="userName" formControlName="userName" autofocus>
<label for="userName">Username</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input mdbActivetype="password" class="form-control col-9" id="password" formControlName="password">
<label for="password">Password</label>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success" (click)="login()" [disabled]="!loginForm.valid">Login</button>
</div>
</div>
</form>
</div>
</div>

Header

However the output is as on the image (https://www.dropbox.com/s/e0ovhneijgvij3f/header.JPG?dl=0). Please assist.

Regards


Hi I'm almost certain my import statements look the same. Will check tonight. Thank you so long!
Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No