Adding class to a placeholder within a card
Question
Application Type
Reactive

Hello,

I am trying to add a style class to a card to make changes to the body placeholder of it. For example, the main class is called ".card" and the body is called ".card-body".

How can I add a class to the body that will only affect this particular card and no other card that is present in the module?


Thank you

Solution

No problem!!

"Both the parent and the body have padding added to them. I want to change only the bodies padding, without affecting the parent's class at all. The problem I run into, when adding a custom class to the style sheet and then applying it to the card's extended class, is that this class will only change the parent's padding and never reach the body."

When adding that custom class to the card, you can do

.custom-class .card-body{

//put your styles here

padding: var(--space-s); //ex

}

In that way, you are going to affect the body styles and not the parent.

Let me know if this answers you.

Kind Regards,

Márcio

Hello Milos, can you give more info about that? or a more detailed question?

Do you want to use the card component and put a placeholder inside and add a class. And then add a class to the body/placeholder to give a style that is different from the other cards just with the .card?

Kind Regards,

Márcio

Yes, exactly that. The card has a body placeholder that contains its own class. This class applies to all cards in the module. For example, I want this cards body background to be black, while keeping all the other cards with the default white background.

From what I understand, you can always change or give that class to the extended class of the card component, like this.



I am just changing the background of the card using the class.:

background-neutral-10

You can put the class you want. And then is just putting the styles you want. As you can see, the extended class will add this to the parent div.





The background was just an example, and probably a poor one at that. I will try to explain more clearly what I am trying to accomplish.

I have a card that I am using from another source and am unable to edit the components of the card. I can simply use that card and add classes to it.

This card has two placeholders: a title and a body. Each of these placeholders have their own style class associated with them. Let's call them .card-title and .card-body. The parent, that encapsulates these two, also has its own style class, let's call it .card. 

Both the parent and the body have padding added to them. I want to change only the bodies padding, without affecting the parent's class at all. The problem I run into, when adding a custom class to the style sheet and then applying it to the card's extended class, is that this class will only change the parent's padding and never reach the body.

Also, I am unable to simply change the default .card-body class to match my needs as there are other uses of this card throughout the app that will also be altered by this change, and I would like to avoid that.


Hope this clears things up a bit. Thank you very much!

Solution

No problem!!

"Both the parent and the body have padding added to them. I want to change only the bodies padding, without affecting the parent's class at all. The problem I run into, when adding a custom class to the style sheet and then applying it to the card's extended class, is that this class will only change the parent's padding and never reach the body."

When adding that custom class to the card, you can do

.custom-class .card-body{

//put your styles here

padding: var(--space-s); //ex

}

In that way, you are going to affect the body styles and not the parent.

Let me know if this answers you.

Kind Regards,

Márcio

i was working on the same answer, you are too fast @Márcio Carvalho 

so here's an oml that demonstrates what Marcio is saying.

Dorine

QDRCSSSelector.oml

Thank you both! This is exactly what I was looking for.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.