SOLVED

Adaptive card columns are stretched on iPhone ms teams app

New Contributor

I am displaying a table like structure using Adaptive cards on ms teams, which comes out right on desktop app and android app. But is somewhat distorted on iPhone ms teams app.

It look as follows on iPhone (11 Pro max)  ms teams:

WhatsApp Image 2020-09-30 at 8.20.27 PM.jpeg

Same card looks as follow on android app (as it is supposed to):

Screenshot_2020-09-30-21-19-45-258_com.microsoft.teams.jpg

The adaptive card code is as follows:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text":`${country} ${budget} P&L (Amounts in \u20b9 Cr)`
}
],
"width": "auto"
}
]
}
],
"bleed": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": "Metric"
},
{
"type": "TextBlock",
"separator":true,
"text": "Revenue"
},
{
"type": "TextBlock",
"separator":true,
"text":`\n`
},
{
"type": "TextBlock",
"separator":true,
"text": "GP"
},
{
"type": "TextBlock",
"separator":true,
"text": "GPM"
},
{
"type": "TextBlock",
"separator":true,
"text": `\n`
},
{
"type": "TextBlock",
"separator":true,
"text": "SGA"
},
{
"type": "TextBlock",
"separator":true,
"text": "SGA%"
},
{
"type": "TextBlock",
"separator":true,
"text": `\n`
},
{
"type": "TextBlock",
"separator":true,
"text": "EBITDA"
},
{
"type": "TextBlock",
"separator":true,
"text": "EBITDA%"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "bolder",
"text": `${partialDataSpeech}`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[0][1]}`
},
{
"type": "TextBlock",
"separator":true,
"text": `\n`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[1][1]}`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[2][1]}%`
},
{
"type": "TextBlock",
"separator":true,
"text": `\n`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[3][1]}`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[4][1]}%`
},
{
"type": "TextBlock",
"separator":true,
"text":`\n`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[5][1]}`
},
{
"type": "TextBlock",
"separator":true,
"weight": "bolder",
"text": `${resultArr[6][1]}%`
}
],
"width": "auto"
}
]
}
]
}

 

2 Replies
best response confirmed by Megs43 (New Contributor)
Solution

@Megs43 , We can repro this issue for iOS mobile. Will file a Bug for this. We will update you once it is resolved. In the meantime could you please try to reduce the width of column set so it can be visible correctly