I am displaying adaptive cards on android and ios. On android device I had issues with text getting truncated. So, I added the "wrap" property but that causes an alignment issue on the cards as can be seen in the below image.
In order to fix the alignment issue, I updated the card template to display each line item as a row using columnset for each of the lines. Please find the template below
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "August 2022 bill",
"wrap": true
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "£83.46",
"horizontalAlignment": "right"
}
]
}
]
},
{
"type": "TextBlock",
"size": "small",
"text": "From 28/07/2022 to 29/08/2022",
"spacing": "medium",
"separator": true
},
{
"type": "TextBlock",
"size": "small",
"text": "0123456789",
"spacing": "small"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Tariff charges",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£20.00",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Minutes",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£0.55",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Messages",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£0.30",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Charges when abroad",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£2.30",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Premium & Information services",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£1.65",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "Balance brought forward",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "£58.66",
"horizontalAlignment": "right",
"wrap": true
}
]
}
]
}
]
}
}
After updating the template, the data gets truncated on iOS device and displays well on Android. Below is the image for iOS
I am unable to figure out the inconsistent behavior across devices. Is there any specific property that causes this behavior(IMO it should have similar behavior across devices).
Or is there any better way to do this to avoid inconsistencies across devices?