Custom Adaptive card not rendering well on MS team on IOS, but working fine with desktop app and android

[snandaku]

Hi , I am trying to display a custom adaptive card on bot framework V4 . It is rendering well on desktop app as well as android phone on MS teams. But it is rendering in bits and pieces on IOS on MS teams. Following are the details of the card used.. Any suggestion would be of great help. { "type": "AdaptiveCard", "body": [ { "type": "Container", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "Large", "weight": "Bolder", "text": "REQUEST APPROVAL" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "Image", "url": "https://adaptivecards.io/content/pending.png", "altText": "Pending", "height": "30px" } ], "width": "auto" } ] } ], "bleed": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTY2MzU3Nzk2OTM2MjMwNTkx/elon_musk_royal_society.jpg", "style": "Person", "size": "Small" } ] }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "wrap": true, "text": "Max Man" }, { "type": "TextBlock", "text": "21-June-2010", "spacing": "None", "size": "Small", "color": "Accent" } ], "width": "stretch", "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Input.Toggle", "id": "select", "title": "90%" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "id": "chevronDown1", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "collapse", "targetElements": [ "cardContent1", "chevronUp1", "chevronDown1" ] }, "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "collapsed" } ], "width": "auto" }, { "type": "Column", "id": "chevronUp1", "isVisible": false, "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent1", "chevronUp1", "chevronDown1" ] }, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "expanded" } ], "width": "auto" } ] }, { "type": "Container", "id": "cardContent1", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Projects", "weight": "Bolder", "color": "Accent" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Percentage", "weight": "Bolder", "color": "Accent" } ] } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "SpaceX" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "90%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Tesla" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "75%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 }, "title": "Approve" } ] } ], "width": "auto" }, { "type": "Column", "width": "stretch", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ShowCard", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "reject1", "isMultiline": true, "placeholder": "Please specify an appropriate reason for rejection." }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send" } ] } ] }, "title": "Reject" } ] } ] } ] } ] } ] }, { "type": "Container", "id": "cardContent2", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "Input.Text", "id": "comment2", "placeholder": "Add your comment here.", "isMultiline": true } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 2 } } ] } ], "width": "auto" } ] } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "style": "Person", "size": "Small", "url": "https://networthbuzz.com/uploads/news/2019/4/3/104225995-_95A5004.1910x1000%20(1)-1554273652865.jpg" } ] }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "wrap": true, "text": "Jack Ma" }, { "type": "TextBlock", "text": "25-June-2010", "color": "Accent", "size": "Small", "spacing": "None" } ], "width": "stretch", "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Input.Toggle", "id": "select2", "title": "57%" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "id": "chevronDown2", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "collapse", "targetElements": [ "cardContent3", "chevronUp2", "chevronDown2" ] }, "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "collapsed" } ], "width": "auto" }, { "type": "Column", "id": "chevronUp2", "isVisible": false, "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent3", "chevronUp2", "chevronDown2" ] }, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "expanded" } ], "width": "auto" } ], "separator": true }, { "type": "Container", "id": "cardContent3", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Projects", "color": "Accent", "weight": "Bolder" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Percentage", "weight": "Bolder", "color": "Accent" } ] } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Alibaba" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "90%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Aliexpress" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "75%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 }, "title": "Approve" } ] } ], "width": "auto" }, { "type": "Column", "width": "stretch", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ShowCard", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "reject2", "isMultiline": true, "placeholder": "Please specify an appropriate reason for rejection." }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send" } ] } ] }, "title": "Reject" } ] } ] } ] } ] } ] }, { "type": "Container", "id": "cardContent6", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "Input.Text", "id": "comment4", "placeholder": "Add your comment here.", "isMultiline": true } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 2 } } ] } ], "width": "auto" } ] } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "style": "Person", "size": "Small", "url": "https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5c76b7d331358e35dd2773a9%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D0%26cropX2%3D4401%26cropY1%3D0%26cropY2%3D4401" } ] }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "wrap": true, "text": "Zuckerberg" }, { "type": "TextBlock", "text": "15-July-2015", "color": "Accent", "size": "Small", "spacing": "None" } ], "width": "stretch", "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Input.Toggle", "id": "select3", "title": "67%" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "id": "chevronDown3", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "collapse", "targetElements": [ "cardContent4", "chevronUp3", "chevronDown3" ] }, "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "collapsed" } ], "width": "auto" }, { "type": "Column", "id": "chevronUp3", "isVisible": false, "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent4", "chevronUp3", "chevronDown3" ] }, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "expanded" } ], "width": "auto" } ], "separator": true }, { "type": "Container", "isVisible": false, "id": "cardContent4", "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Projects", "color": "Accent", "weight": "Bolder" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Percentage", "weight": "Bolder", "color": "Accent" } ] } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Facebook" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "30%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Instagram" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "79%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 }, "title": "Approve" } ] } ], "width": "auto" }, { "type": "Column", "width": "stretch", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ShowCard", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "reject3", "isMultiline": true, "placeholder": "Please specify an appropriate reason for rejection." }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send" } ] } ] }, "title": "Reject" } ] } ] } ] } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "style": "Person", "size": "Small", "url": "https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTY2NzA3ODE3OTgwMzcyMjYw/jeff-bezos-andrew-harrer_bloomberg-via-getty-images.jpg" } ] }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "wrap": true, "text": "Jeff Bezos" }, { "type": "TextBlock", "text": "29-Dec-2020", "color": "Accent", "size": "Small", "spacing": "None" } ], "width": "stretch", "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Input.Toggle", "id": "select4", "title": "30%" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "id": "chevronDown4", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "collapse", "targetElements": [ "cardContent5", "chevronUp4", "chevronDown4" ] }, "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "collapsed" } ], "width": "auto" }, { "type": "Column", "id": "chevronUp4", "isVisible": false, "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent5", "chevronUp4", "chevronDown4" ] }, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "expanded" } ], "width": "auto" } ], "separator": true }, { "type": "Container", "id": "cardContent5", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Projects", "color": "Accent", "weight": "Bolder" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Percentage", "weight": "Bolder", "color": "Accent" } ] } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Amazon" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "85%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Kindle" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "45%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 }, "title": "Approve" } ] } ], "width": "auto" }, { "type": "Column", "width": "stretch", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ShowCard", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "reject4", "isMultiline": true, "placeholder": "Please specify an appropriate reason for rejection." }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send" } ] } ] }, "title": "Reject" } ] } ] } ] } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "style": "Person", "size": "Small", "url": "https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5e7550d42a573300068feb7b%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D745%26cropX2%3D2367%26cropY1%3D15%26cropY2%3D1636" } ] }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "wrap": true, "text": "Lei Jun" }, { "type": "TextBlock", "text": "15-Jan-2010", "color": "Accent", "size": "Small", "spacing": "None" } ], "width": "stretch", "verticalContentAlignment": "Center" }, { "type": "Column", "width": "auto", "items": [ { "type": "Input.Toggle", "id": "select5", "title": "32%" } ], "verticalContentAlignment": "Center" }, { "type": "Column", "id": "chevronDown5", "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "collapse", "targetElements": [ "cardContent7", "chevronUp5", "chevronDown5" ] }, "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "collapsed" } ], "width": "auto" }, { "type": "Column", "id": "chevronUp5", "isVisible": false, "spacing": "Small", "verticalContentAlignment": "Center", "items": [ { "type": "Image", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent7", "chevronUp5", "chevronDown5" ] }, "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "expanded" } ], "width": "auto" } ], "separator": true }, { "type": "Container", "id": "cardContent7", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Projects", "color": "Accent", "weight": "Bolder" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Percentage", "weight": "Bolder", "color": "Accent" } ] } ] } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Xiaomi" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "20%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Poco" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "75%" } ] } ] }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 }, "title": "Approve" } ] } ], "width": "auto" }, { "type": "Column", "width": "stretch", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.ShowCard", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "reject5", "isMultiline": true, "placeholder": "Please specify an appropriate reason for rejection." }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send" } ] } ] }, "title": "Reject" } ] } ] } ] } ] } ] }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Approve Selected Items", "style": "positive", "iconUrl": "http://icons.iconarchive.com/icons/cheezen/web-2/128/check-icon.png" }, { "type": "Action.Submit", "title": "Next " } ], "spacing": "Medium", "separator": true, "horizontalAlignment": "Center" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly." }

[jwoo-msft]

PRMerger20

Your payload works fine with AdaptiveCards iOS SDK.

It could be width issue. The above picture has AdaptiveCards width of 330 pixel. I experimented with width, and it worked up to 240 pixel. Smaller than 240 pixel, AdaptiveCards start to get squeezed as shown in the below image . However, it didn't dropped the picture entirely.