html - 桌面版 Outlook 365 中带有 HTML 正文的自适应卡片垂直滚动条

问题描述

我在 html 页面的 head 标记内的脚本标记中有一个有效负载，该页面由 C# 使用 SMTP 客户端发送。它工作得很好，我在桌面上的 Outlook 365 中看到了卡片，但问题是卡片的高度是根据内容预定义的，因此当人们有小屏幕时，卡片会有一个垂直滚动条。此外，页面正文中的 html 也有一个垂直滚动条。我尝试使用 Outlook.com，但它没有表现出这种行为

这些滚动条是不可取的。确保卡片和 html 都没有垂直滚动条并让 Outlook 拥有它自己的滚动条的正确方法是什么，这样我们就可以使用 Outlook 滚动条而不是卡片或 HTML 滚动

这是有效载荷：

<div>
    <script type="application/adaptivecard+json">
    {
        "type": "AdaptiveCard",
        "body": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "Image",
                        "url": "@LOGO",
                        "size": "Large"
                    },
                    {
                        "type": "TextBlock",
                        "size": "Medium",
                        "weight": "Bolder",
                        "text": "@ADAPTIVE_CARD_TITLE"
                    },
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "weight": "Bolder",
                                        "text": "@SERVICE_TITLE",
                                        "wrap": true
                                    },
                                    {
                                        "type": "TextBlock",
                                        "spacing": "None",
                                        "text": "@SERVICE_DATE",
                                        "isSubtle": true,
                                        "wrap": true
                                    }
                                ],
                                "width": "stretch"
                            }
                        ]
                    }
                ]
            },
            {
                "type": "Container",
                "items": [
                    {
                        "type": "TextBlock",
                        "spacing": "None",
                        "text": "@REVIEW_TITLE",
                        "wrap": true
                    },
                    {
                        "type": "ColumnSet",
                        "separator": true,
                        "columns": [
                            {
                                "type": "Column",
                                "separator": true,
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "@EMPLOYEE_TITLE"
                                    }
                                ],
                                "width": "stretch"
                            },
                            {
                                "type": "Column",
                                "separator": true,
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "@EMPLOYEE_VALUE"
                                    }
                                ],
                                "width": "stretch"
                            }
                        ]
                    },
                    {
                        "type": "ColumnSet",
                        "spacing": "None",
                        "separator": true,
                        "columns": [
                            {
                                "type": "Column",
                                "separator": true,
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "@ACCOUNT_DATE_TITLE"
                                    }
                                ],
                                "width": "stretch"
                            },
                            {
                                "type": "Column",
                                "separator": true,
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "text": "@ACCOUNT_DATE_VALUE"
                                    }
                                ],
                                "width": "stretch"
                            }
                        ]
                    }
                ]
            }
        ],
        "actions": [
            {
                "type": "Action.OpenUrl",
                "title": "@APPROVE_TITLE",
                "url": "@APPROVE_URL"
            },
            {
                "type": "Action.ShowCard",
                "title": "@REJECT_TITLE",
                "card": {
                    "type": "AdaptiveCard",
                    "body": [
                        {
                            "type": "Input.Text",
                            "id": "comment",
                            "placeholder": "@COMMENT_PLACE_HOLDER",
                            "isMultiline": true
                        }
                    ],
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "@SEND_REASON_TITLE",
                            "url": "@SEND_REASON_URL"
                        }
                    ],
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                }
            }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.0"
    }
    </script>
    <br />
    @BODY
</div>

标签： htmloutlookadaptive-cards

我会发表评论，但我还没有代表。

我无法复制您的问题。我用我在设计器中制作的一张长卡片进行了测试（只是添加了一堆文本块），并在OWA（Outlook Web App）中查看，只有一个滚动条。我不在桌面客户端的月度发布频道，所以我无法测试（仅兼容月度发布频道。

哪个版本的 Outlook 呈现卡片？

也许尝试将@BODY 放在脚本标签下方的头部内？它可能会删除其中一个滚动条。

html - 桌面版 Outlook 365 中带有 HTML 正文的自适应卡片垂直滚动条

问题描述

解决方案

推荐阅读