Adaptive Card vertical scrollbar with HTML body in Outlook 365 on the desktop - html

Question

I have a payload in a script tag inside the head tag of an html page which is sent by C# using SMTP client. It works just fine, I see the card in Outlook 365 on the desktop but the problem is the height of the card is predefined based on the content thus when people have small screen, there's a vertical scrollbar for the card. Additionally, the html in the body of the page has also a vertical scrollbar. I tried with Outlook.com and it doesn't exhibit this behavior
These scrollbars are not desirable. What would be the correct way to ensure that both the card AND the html doesn't have vertical scrollbar and let Outlook have it's own one so we can scroll using Outlook scrollbar not the card or the HTML
Here's the payload :
<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>

Answer 1

I would comment, but I don't have the rep yet.
I am unable to replicate your issue. I tested with a long card I made in the designer (just added a bunch of text blocks), and viewed it in OWA (Outlook Web App), and there was only one scroll bar. I am not on the monthly release channel for the desktop client, so I can't test that (only compatible for monthly release channel.
Which version of Outlook is rendering the card?
Maybe try putting #BODY inside of head below the script tag? It might remove one of the scrollbars.