[FEATURE] More symmetry between modals and cards

[mholt]

Is your feature request related to a problem? Please describe.

I'm adding a form to a modal, but I want a footer like the card footers, with the light background and light top border, kind of like this:

Describe the solution you'd like

Maybe a class that can make .modal-footer look like .card-footer

Describe alternatives you've considered

I've tried putting a .card in the modal as you can see above, but I had to set border: 0 myself to avoid a weird border around the .card-body (which should ideally just be .modal-body) all so I could use .card-footer. But even then, the border-radius of the footer is smaller than that of the modal, so the top and bottom of the modal have different border corners.

Basically: I like the look of the .card-footer (the light bg and border) in a modal, but I can't figure out how to make it fit nicely.

This is definitely just my personal taste, so it's OK if you don't want to do it; but I figured I'd ask in case you know a good way to make it possible!

Thanks for Tabler. My app looks way better than if I did it myself.

[Hussain0520]

Hey @mholt are you working on this issue? If not I would like to work. Thanks!

[mholt]

I am not, go for it! 👍

[Hussain0520]

Thanks, Is there someone who can assign me this?

[Hussain0520]

@codecalm can you assign me this feature?

[Hussain0520]

Hey @mholt can you tell me how to replicate what you were trying in order to understand what changes I need to do. It would be helpful, Thanks!

[mholt]

@Hussain0520 Regrettably, I don't have my code anymore for that attempt, but it was basically:

• A simple modal like the "Modal with form" example here: https://preview.tabler.io/modals.html
• But instead of .modal-footer I used .card-footer; this of course requires being in a .card, so I also added the .card class to .modal-content.

Those two changes in your browser inspector tools should give you the same result as my attempt.

It'd basically be nice to have that look possible, without having to hack a .card into it.

[Hussain0520]

Okay @mholt got it Thanks!

[Hussain0520]

Hey @mholt are you looking for something like this? I tried this with Chrome Devtools!

[mholt]

Yeah, basically. The screenshot is cropped really close (too close to tell what the border radius is), and the padding in the footer looks a little off-balance; but that's the basic idea. (Thanks!)

[Hussain0520]

I didn't get the idea about the border radius but yeah the padding can be adjusted.

[mholt]

I mean that the border-radius on the top of the modal and the bottom should be the same.

[Hussain0520]

Hey @mholt actually I made the changes using DevTools and got the result but when I make changes in the code on my local machine I'm not seeing any changes. Do you have any idea about it? PS: I made changes in _modal.scss from _cards.scss

[codecalm]

I've unified all :)

[mholt]

It's beautiful!! Thank you! Can't wait to use it 😃

And once it's ready I'll show off my Tabler app