MDB 8 - .card style is missing


Topic: MDB 8 - .card style is missing

mdb2 pro asked 5 years ago

Q: .card style is missing, specifically box-shadow. Is there a stylesheet I should app to angular.json ?

A: I have tested cards yesterday, and there were no problems. Are you using mdb-card component or div.card? From MDB 8 that's obligatory to use the mdb-card.

--

One one hand, I understand that there is no scss file that I miss can on the other, you say that div.card doesn't work any more which means that "card" style rule no longer exists in 8 ?

Did I miss it from the migration guide ?

I am talking about the info cards here. sample: https://imgur.com/a/p6k8wb8

Do you have doc on how to build it in 8 ?


Damian Gemza staff answered 5 years ago

Dear @mdb2

You SHOULDN'T definitely create new ticket for every thing about which we were discussing in your previous post.

About your problem: As I said to you before, and this was described in the Migration Guide, the div.card and every similar element has been deprecated - from MDB 8 this is neccessary to use mdb-card component, because those components contains stylesheet which holds every .card style about which you're talking about.

If you're using mdb-card and there's still a problem with the .card styles, please show me the code.

Best Regards,

Damian


mdb2 pro answered 5 years ago

I created new tickets because they referred to different issues.

I have a lot of div.card elements. Gonna be challenging to convert them all

I still cannot find in the Migration Guide instructions about div.card. There is one about card animations, which seems irrelevant. Can you please share a link to div.card being deprecated ?


Damian Gemza staff answered 5 years ago

Dear @mdb2

Oh sorry, my bad. The deprecation of div.card isn't described in the Migration Guide. I'll update it.

But there's no other option like to change every occurrence of the .card, .card-body, .card-text, .card-header, .card-footer elements to corresponsing mdb-card-* component.

Card styles are included in mdb-card-* components, so if you won't use them, you won't get material design styles for cards.

Best Regards,

Damian


mdb2 pro commented 5 years ago

Do you have a link to mdb-card-* components ?


Damian Gemza staff answered 5 years ago

Dear @mdb2

You can find them in Card and Panel documentation.

Best Regards,

Damian


mdb2 pro answered 5 years ago

I started preparing for changing "card-*" styles with mdb-card then I saw a great variety of styles that I don't know how to convert:

.contact-card with-padding
.h3-responsive text-xs-center
.card-cascade 
.narrower
.card-block
.card-body
.card-header
.card-title
.card-text
.card-up

I understand that there are new:

<mdb-card>
<mdb-card-img>
<mdb-card-body>
<mdb-card-title>
<mdb-card-text>

A migration guide will be much helpful, of any other guide describing all the new components


Arkadiusz Idzikowski staff answered 5 years ago

What are the exact problems with updating these elements?

You need to replace div with .card class with <mdb-card> component, div with class .card-body with <mdb-card-body> component and so on.

If you need to use cascade/wider/narrower cards then use Angular inputs as explained in the documentation:

https://mdbootstrap.com/docs/angular/components/cards/


mdb2 pro answered 5 years ago

With what should I replace:

.contact-card with-padding
.card-block
.card-header
.card-up

Damian Gemza staff commented 5 years ago

You can leave those classes except .card-header, because mdb-card-header is a component.


mdb2 pro answered 5 years ago

I copied the code in the first example here: https://mdbootstrap.com/docs/angular/components/cards/

This is what I got: https://imgur.com/a/NYEmgXT

As if all the styles are missing. mdbBtn is also not activated. There are no runtime errors

Looking closer, I see that mdb-card is not expanded when inside basic sub components

instead of

<mdb-card>
<div class="card" ...>
<mdb-card-body>

What I get is:

<mdb-card>
<mdb-card-body>

when placed inside other components.

What am I missing ?


Arkadiusz Idzikowski staff commented 5 years ago

It's hard to tell without seeing your code and configuration files (package.json, angular.json, module file). We can't reproduce this problem on our end, please update your question with more details.


mdb2 pro answered 5 years ago

It appeared as if MDBBootstrapModule was not referenced for the specific module of the component, so now the styles work


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes
Tags