Microsoft Teams - Rendering issues of adaptive cards in the Chat

Question

Version of SDK

AdaptiveCards 1.1.2 from NuGet

"$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0"

Issue

This is the adaptive card's JSON that is generated from .NET core
app.
https://pastebin.com/F1nkSdRS

When this JSON is pasted on https://adaptivecards.io/designer/ it renders very well

The text "Some text that should be centered in MS Teams" is placed within a column in columnSet with VerticalAlignment.Center and it renders perfectly fine in App Studio or the web designer. When the same JSON is send in a chat in MS Teams the text is rather with VerticalAlignment.Top as shown on this image

Answer 1

Unfortunately, the outcome you are experiencing is entirely channel specific. In other words, it isn't a deficiency of adaptive cards but rather how the individual channels (Teams, in this case) are rendering the adaptive cards.

For this reason, you should expect results to potentially vary from channel to channel for different objects and actions depending on what it is you are trying to accomplish.

That being said, this could be an issue in rendering but it is one you would have to take up with MS Teams.

Answer 2

I've got an answer into AdaptiveCards Microsoft repository => https://github.com/microsoft/AdaptiveCards/issues/3062

"Hi @siderisltd, thanks for taking the time to file this. verticalContentAlignment was added in v1.1 of the schema, and as of right now Microsoft Teams is running on v1.0, so the property is not understood on Teams yet.

We are working on an improvement to the Designer to include a Target version selector (potentially automatically selected based on the Host app dropdown), which will let you know if you're using newer properties/features than are currently supported by your desired Host app.

@dclaux FYI"