SOLVED

Adaptive card columns are stretched on iPhone ms teams app

%3CLINGO-SUB%20id%3D%22lingo-sub-1730755%22%20slang%3D%22en-US%22%3EAdaptive%20card%20columns%20are%20stretched%20on%20iPhone%20ms%20teams%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1730755%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20displaying%20a%20table%20like%20structure%20using%20Adaptive%20cards%20on%20ms%20teams%2C%20which%20comes%20out%20right%20on%20desktop%20app%20and%20android%20app.%20But%20is%20somewhat%20distorted%20on%20iPhone%20ms%20teams%20app.%3C%2FP%3E%3CP%3EIt%20look%20as%20follows%20on%20iPhone%20(11%20Pro%20max)%26nbsp%3B%20ms%20teams%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22WhatsApp%20Image%202020-09-30%20at%208.20.27%20PM.jpeg%22%20style%3D%22width%3A%20185px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F223096i205585F4B31B95A1%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22WhatsApp%20Image%202020-09-30%20at%208.20.27%20PM.jpeg%22%20alt%3D%22WhatsApp%20Image%202020-09-30%20at%208.20.27%20PM.jpeg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3ESame%20card%20looks%20as%20follow%20on%20android%20app%20(as%20it%20is%20supposed%20to)%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot_2020-09-30-21-19-45-258_com.microsoft.teams.jpg%22%20style%3D%22width%3A%20200px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F223097iD82960D59E8B3136%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Screenshot_2020-09-30-21-19-45-258_com.microsoft.teams.jpg%22%20alt%3D%22Screenshot_2020-09-30-21-19-45-258_com.microsoft.teams.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EThe%20adaptive%20card%20code%20is%20as%20follows%3A%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22http%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttp%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22type%22%3A%20%22AdaptiveCard%22%2C%3CBR%20%2F%3E%22version%22%3A%20%221.0%22%2C%3CBR%20%2F%3E%22body%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Container%22%2C%3CBR%20%2F%3E%22style%22%3A%20%22emphasis%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22ColumnSet%22%2C%3CBR%20%2F%3E%22columns%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22text%22%3A%60%24%7Bcountry%7D%20%24%7Bbudget%7D%20P%26amp%3BL%20(Amounts%20in%20%5Cu20b9%20Cr)%60%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%2C%3CBR%20%2F%3E%22width%22%3A%20%22auto%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%2C%3CBR%20%2F%3E%22bleed%22%3A%20true%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22ColumnSet%22%2C%3CBR%20%2F%3E%22columns%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Metric%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22Revenue%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22GP%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22GPM%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22SGA%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22SGA%25%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22EBITDA%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%22EBITDA%25%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%2C%3CBR%20%2F%3E%22width%22%3A%20%22auto%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BpartialDataSpeech%7D%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B0%5D%5B1%5D%7D%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B1%5D%5B1%5D%7D%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B2%5D%5B1%5D%7D%25%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%20%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B3%5D%5B1%5D%7D%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B4%5D%5B1%5D%7D%25%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22text%22%3A%60%5Cn%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B5%5D%5B1%5D%7D%60%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%60%24%7BresultArr%5B6%5D%5B1%5D%7D%25%60%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%2C%3CBR%20%2F%3E%22width%22%3A%20%22auto%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1730755%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1744803%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20columns%20are%20stretched%20on%20iPhone%20ms%20teams%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1744803%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F815150%22%20target%3D%22_blank%22%3E%40Megs43%3C%2FA%3E%26nbsp%3B%2C%20We%20can%20repro%20this%20issue%20for%20iOS%20mobile.%20Will%20file%20a%20Bug%20for%20this.%20We%20will%20update%20you%20once%20it%20is%20resolved.%20In%20the%20meantime%20could%20you%20please%20try%20to%20reduce%20the%20width%20of%20column%20set%20so%20it%20can%20be%20visible%20correctly%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1745554%22%20slang%3D%22en-US%22%3ERe%3A%20Adaptive%20card%20columns%20are%20stretched%20on%20iPhone%20ms%20teams%20app%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1745554%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F371090%22%20target%3D%22_blank%22%3E%40Trinetra-MSFT%3C%2FA%3E%26nbsp%3B%20okay%20thank%20you.%3C%2FP%3E%3C%2FLINGO-BODY%3E
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