如何调整AdaptiveCard中Input.Text输入框的显示尺寸

为什么你之前的调整完全没效果 #

你加的height:"auto"从配置逻辑上就不对，调整没反应是必然的：

• 这个属性是AdaptiveCard 1.1版本之后新增的布局类属性，仅对Container、Column、ColumnSet这类布局容器生效，作用是让容器自动撑满父级的剩余空间
• 输入类控件（包括Input.Text）本身根本不识别这个属性，哪怕写上去也会被渲染引擎直接忽略，不会产生任何尺寸变化
• 你当前卡片用的是1.0版本，这个版本本身就不支持任何自定义布局尺寸控制的能力，自然不会有预期效果。

这个调整需求本身是完全可以实现的，不用怀疑可行性。

邮件场景下稳定生效的调整方案 #

不需要在输入框本身做复杂配置，通过外层容器的高度约束就能实现稳定的尺寸拉伸，这是目前Outlook等邮件客户端渲染AdaptiveCard时兼容度最高的方式：

• 先把AdaptiveCard的版本从1.0升级到1.5，解锁布局控制能力，原有功能不会受影响
• 删掉Input.Text上无效的height:"auto"配置
• 给包裹输入框的外层Container加上minHeight属性，设置成你需要的输入框可视高度（一般150-200px足够顺畅输入），输入框会自动撑满容器的可用宽度，跟着容器高度自然拉伸

调整后的可直接复用配置 #

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "Input.Text",
                    "id": "multilineInputId",
                    "placeholder": "enter comment",
                    "isMultiline": true,
                    "value": "EDITABLE TEXT"
                }
            ],
            "minHeight": "180px",
            "padding": "8px"
        }
    ],
    "actions": [
        {
            "type": "Action.Http",
            "title": "Click me!",
            "method": "POST",
            "url": "https://contoso.com/api/...",
            "body": "<body of the POST request>",
            "headers": [
                {
                    "name": "Content-Type",
                    "value": "application/json"
                }
            ]
        }
    ]
}

注意事项 #

• 不要尝试给Input.Text直接写自定义CSS样式、行高参数，邮件端的AdaptiveCard渲染是沙箱隔离的，这类自定义配置不会生效
• 不要退回到1.0低版本做布局调整，低版本根本不支持高度约束能力，只会渲染成默认的单行小输入框
• Action.Http的功能和新版本完全兼容，升级版本不会影响原有提交逻辑的运行

内容的提问来源于stack exchange，提问作者Amon