Topic: MDB 8 - .card style is missing
itay 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 ?
itay 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
itay 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.
itay 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.
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/
itay 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
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
itay 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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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