Button not aligned to bottom inside Card footer anymore since update to 3.3.0

Hi Lucas,
this for sure is only a small thing (for you): On the home page of my own website since I made the update to 3.3.0 today the buttons in the Cards footer are not aligned to the bottom anymore: https://www.wolf-websolutions.de (grey buttons “Mehr erfahren…”). It’s quite a long time that I did work with UiKit (shame on me) ;-) and so I’m quite lost currently with this. Would be glad for some help to get this fixed. Thanks!

Hi, not wanting to speak for Lucas, but first off check there isn’t some css class in the advanced settings for those buttons. Previously, for the advanced classes to take effect you had to tick the advanced box, now you don’t.

Next, how did you align the buttons to the bottom in the first place? Position stack, third party stack like Joes Match Height etc?

As it looks at the moment is what I’d expect to see, if you’ve not done something to pin the buttons to the bottom of the card stack, so if they were pinned previously, you must have done it yourself somehow (unless there is a setting in UIkit that I’ve missed!)

EDIT: I see, you’ve used the uk-margin-auto-top class. In which case, I can’t help. I don’t use that method myself, I prefer to either use the Position stack, or Match Height.

Thanks @steveb for that quick answer. To be true I have absolutely no idea what I’ve done in this case. The last time I touched the page is 1.5 years ago and since then I didn’t work with UiKit.
Maybe I could solve this by myself if I would dig deeper again into this framework for some hours, but simply said I absolutely don’t have this time due to client pressure with other web projects. So my hope is that Lucas (or s.o. else like you) can help me out with this within a minute… ;-)
If you want you can have a look at a stripped down project file of this page: https://d.pr/f/PPQEHj Thanks so much!

Yes, defo something a bit screwy going on there. The buttons are in the Card footer, so should be at the bottom.

I’m trying to find a workaround.

EDIT: Here ya go, a fairly inelegant fix, but it works. If you have Joes Match Height stack, I’d tend to use that for things like this. If you have it I can make another version for you.

Hey @wolf, not working with UIkit? Oh that’s unforgivable :-)

In UIkit we can match elements heights by entering the related class into the Grid stack. Find the Grid where your Cards are and check the Match height option. In the field that opens enter uk-card-body, so all Card body elements will have the same height.

Hope this helps.

Ha ha! That’s really bloody handy, never knew that. Works a treat. Previously I’d only used uk-card and that doesn’t work as well.

Yep the same way we can match height of other elements into the Grid, not only the Card and it’s components.

That I didn’t know.

Thanks @Lucas, works like a treat! I had only uk-card in there (the “-body” missing). No idea why it did work before the update. ;-) Also thanks to @steveb for his help. Both highly appreciated! :-)

1 Like