Forum Discussion

Megs43's avatar
Megs43
Copper Contributor
Sep 30, 2020
Solved

Adaptive card columns are stretched on iPhone ms teams app

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:

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

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"
}
]
}
]
}

 

  • 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 

     

2 Replies

  • 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 

     

Resources