Topic: Card headers broken

niellangenhoven free asked 5 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.

Rafał Rogulski free answered 5 years ago


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


niellangenhoven free answered 5 years ago


Hi I'm almost certain my import statements look the same. Will check tonight. Thank you so long!

niellangenhoven free answered 5 years ago


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


Rafał Rogulski free answered 5 years ago


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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags