?
avatar Bakual
Bakual
6 May 2021

Steps to reproduce the issue

I use a centered Bootstrap card in my component where I have an icon as header and text as body. This used to look fine together with text-center.
With #33100, the header icon is now aligned left.
From what I see, the reason comes from this line here:

Expected result

image

Actual result

image

Additional comments

I'm not sure if this was an intentional change by @ciar4n that each instance of cards are changed. Maybe he only wanted to change specific uses?

avatar Bakual Bakual - open - 6 May 2021
avatar joomla-cms-bot joomla-cms-bot - change - 6 May 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 6 May 2021
avatar Bakual Bakual - change - 6 May 2021
Title
Centered Cards a bit broken in Atum
[4.0] Centered Cards a bit broken in Atum
avatar Bakual Bakual - edited - 6 May 2021
avatar Bakual
Bakual - comment - 6 May 2021

Btw, also the background of the header is now white, while it was a bit greyish before. Imho it looked better with the slightly different background color, but I'm no designer - so won't argue ?
Merely wondering if that was intentional as well.

avatar ciar4n
ciar4n - comment - 7 May 2021

Yes the card header was changed to flex with the recent repaint. Flex was just better suited for handling the multiple header elements in some of the cpanel cards,

As its a flex container you can use the BS m-auto class on the element you wished centered (presuming this is the only element in the header). You can also add the BS class justify-content-center to the card header instead.

avatar ciar4n
ciar4n - comment - 7 May 2021

Just going back a bit, it looks like the white card headers have been there for a while. Im not sure at what point they changed.

avatar Bakual
Bakual - comment - 7 May 2021

Thanks, I'll try then with the other classes you mentioned.
The white card headers were part of your PR or some commits after it. My first screenshot is the state of the repo directly before the merge of your PR ?

avatar Bakual
Bakual - comment - 7 May 2021

The suggested classes worked for re-centering the header, that's fine.

Just going back a bit, it looks like the white card headers have been there for a while. Im not sure at what point they changed.

@ciar4n As for the color I did some investigations. It was defined as white for the cpanel cards before (using the variable card-bg). You expanded that to all cards within .content (which is the component area) in your repaint PR. Previously it used the BS5 default color (using card-cap-bg) for those.

avatar Bakual Bakual - close - 7 May 2021
avatar Bakual
Bakual - comment - 7 May 2021

I'm closing this issue as I have a solution

avatar Bakual Bakual - change - 7 May 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-05-07 17:41:23
Closed_By Bakual

Add a Comment

Login with GitHub to post a comment