自适应卡片水平对齐 属性 到 "Center" 或 "Right" 在 iOS 移动应用程序的 MS Teams 中不起作用
Adaptive Card horizontal alignment property to "Center" or "Right" is not working in MS Teams on iOS mobile app
我们在以下自适应元素中遇到 "Horizontal alignment" 属性 问题:AdaptiveColumn、AdaptiveTextBlock 和 AdaptiveImage。将此 属性 设置为 "Center" 或 "Right" 会导致重大设计问题(见附图)。
原文:
"Right"对齐方式:
这里是 JSON:
{
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 15,
"items": []
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png",
"width": "30px",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Previous"
},
"horizontalAlignment": "Left"
},
{
"type": "Column",
"width": 40,
"items": [
{
"type": "Image",
"size": "Large",
"url": "https://aboutflowers.com/wp-content/uploads/2016/10/AboutFlowers_S600Alstroemera_SymphonyMorita_Esmeralda.jpg",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-10-512.png",
"width": "30px",
"horizontalAlignment": "Right",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Next"
}
},
{
"type": "Column",
"width": 15,
"items": []
}
]
}
]
},
{
"type": "TextBlock",
"text": "Image1",
"horizontalAlignment": "Center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
相同的设计在 Android 和桌面客户端上正常工作。
Stack Overflow 不适用于错误报告。您可以通过 Teams 应用本身提交反馈,也可以查看此反馈页面:https://docs.microsoft.com/en-us/microsoftteams/platform/feedback
如果您确实提交了反馈,请随时 link 到此 Stack Overflow post 以提供必要的信息。
在错误修复之前,您需要找到某种解决方法。或许你可以尝试 "center" 对齐而不是左右对齐。如果这不起作用,那么您可能不得不不使用任何对齐方式。您可能有兴趣知道架构提到使用 height
属性 时图像失真的可能性,因此您也可以尝试省略宽度和高度规范:https://adaptivecards.io/explorer/Image.html
我们在以下自适应元素中遇到 "Horizontal alignment" 属性 问题:AdaptiveColumn、AdaptiveTextBlock 和 AdaptiveImage。将此 属性 设置为 "Center" 或 "Right" 会导致重大设计问题(见附图)。
原文:
"Right"对齐方式:
这里是 JSON:
{
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 15,
"items": []
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png",
"width": "30px",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Previous"
},
"horizontalAlignment": "Left"
},
{
"type": "Column",
"width": 40,
"items": [
{
"type": "Image",
"size": "Large",
"url": "https://aboutflowers.com/wp-content/uploads/2016/10/AboutFlowers_S600Alstroemera_SymphonyMorita_Esmeralda.jpg",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Column",
"width": 15,
"items": [
{
"type": "Image",
"url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-10-512.png",
"width": "30px",
"horizontalAlignment": "Right",
"height": "24px"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.Submit",
"title": "Next"
}
},
{
"type": "Column",
"width": 15,
"items": []
}
]
}
]
},
{
"type": "TextBlock",
"text": "Image1",
"horizontalAlignment": "Center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
相同的设计在 Android 和桌面客户端上正常工作。
Stack Overflow 不适用于错误报告。您可以通过 Teams 应用本身提交反馈,也可以查看此反馈页面:https://docs.microsoft.com/en-us/microsoftteams/platform/feedback
如果您确实提交了反馈,请随时 link 到此 Stack Overflow post 以提供必要的信息。
在错误修复之前,您需要找到某种解决方法。或许你可以尝试 "center" 对齐而不是左右对齐。如果这不起作用,那么您可能不得不不使用任何对齐方式。您可能有兴趣知道架构提到使用 height
属性 时图像失真的可能性,因此您也可以尝试省略宽度和高度规范:https://adaptivecards.io/explorer/Image.html