Teams connector adaptive card has unnecessary padding on top of the card

[VilPel]

Hello community members,

I am trying to post the most simple adaptive card possible to a Teams channel using this action:

As you can see the adaptive card is very simple and in https://adaptivecards.io/designer/ there is no issues:

Now, when I run the Flow, the created adaptive card has an unnecessary padding on top of the card. This only happens when the "Post as" is selected as "User". Here is the end result:

When I post the adaptive card as Flow bot, there is no issues:

Has anybody else had similar issues with adaptive cards? Any solutions?

Thanks in advance,

Ville

[SueB]

Hi @VilPel 

Yes, that padding is currently by design. I don't have a solution to offer yet. A simple bit of custom styling would be a solution.

The padding is due to a combination of a div block that contains the three ellipses on the right side for Card Options and an element style with 16px of padding. 

Thank you for using Microsoft Power Platform Communities!

Sue
Support Engineer
Microsoft Power Platform

If this post helps, then please consider accepting it as the solution to help other members find it more quickly! Have a great day!

[VilPel]

Thanks for the reply!

What would be "A simple bit of custom styling"? @SueB 

[SueB]

My pleasure @VilPel !

I would start with this pure CSS:  div.ac-container, div.ac-adaptiveCard {padding:0 16px;}. 

We need to make sure it only applies the style to that specific Adaptive Card otherwise it could affect all the cards displayed. It would take a little trial and error. 😉

Thank you for using Microsoft Power Platform Communities!

Sue
Support Engineer
Microsoft Power Platform

If this post helps, then please consider accepting it as the solution to help other members find it more quickly! Have a great day!

[awox]

@SueB Are we able to send custom CSS along with the AdaptiveCard?

Respectfully, how is this possibly a workable solution? How could this possibly be by design?