Allow elements to stretch vertically to make it possible to align content to the bottom of a fixed-height card

Implementation status

• TypeScript (PR https://github.com/Microsoft/AdaptiveCards/pull/483)
• UWP (PR https://github.com/Microsoft/AdaptiveCards/pull/1377)
• WPF (#1665)
• iOS (#1296)
• Android (#1297)
• Documentation

Problem

Currently, it is not really possible to align content at the bottom of a fixed-height card. Card authors have to recourse to hacks such as inserting an invisible image of a specific height to reserve some blank space. Such hacks are very fragile because they rely on knowing what the actual height of the target container is; cards authored using such hacks risk breaking if the container’s height changes.

Design

Add a new height property to all element types:

Property name	Type	Description
height	string. Allowed values are “auto” and “stretch”	Defines how the element’s height is computed within its parent container. When set to “auto” (default), the height of the element is what it needs. When set to “stretch”, the element stretches to the available height in its parent container. When multiple elements have their height property set to “stretch”, they share the available height equally.

Because we are introducing a “height” property, it makes sense to also rename the “size” property of a Column to “width”

Example

Card payload

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"height": "stretch",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "This is the top container.",
					"wrap": true
				}
			]
		},
		{
		    "type": "Container",
			"spacing": "large",
			"separator": true,
		    "items": [
		        {
		            "type": "TextBlock",
		            "text": "This is the middle container. Its **height** property is **stretch** so it uses all the remaining vertical space.",
		            "wrap": true
		        }
		    ]
		    
		},
		{
			"type": "ColumnSet",
			"height": "stretch",
			"columns": [
			    {
			        "width": "auto",
			        "items": [
						{
							"type": "Image",
							"url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
							"size": "small",
							"style": "person"
						}
			        ]
			    },
			    {
			        "width": "stretch",
			        "spacing": "large",
			        "separator": true,
			        "items": [
	                    {
	                        "type": "TextBlock",
	                        "height": "stretch",
	                        "text": "It also works within a ColumnSet",
	                        "wrap": true
	                    },
			            {
			                "type": "TextBlock",
			                "text": "This text aligns with the bottom of the column",
	                        "wrap": true
			            }
			        ]
			    }
			]
		},
		{
		    "type": "Container",
			"spacing": "large",
			"separator": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "This is the bottom container.",
					"speak": "",
					"wrap": true
				}
			]
		}
	]
}

As rendered in the Windows Live Tile container:

Another example

Card payload

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"height": "stretch",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"width": 1,
					"items": [
						{
							"type": "TextBlock",
							"text": "The left column has a very, very long text which makes it very tall. Because it is tall, the right column is also very tall. The right column contains two TextBlocks; one is displaying at the top of the column, while the other one is displayed at the bottom. That is achieved by setting the first TextBlock's **height** property to **stretch**.",
							"wrap": true
						}
					]
				},
				{
					"width": 1,
					"spacing": "large",
					"separator": true,
					"items": [
						{
							"type": "TextBlock",
							"height": "stretch",
							"text": "First TextBlock displayed at the top",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "Second TextBlock displayed at the bottom",
							"wrap": true
						}
					]
				}
			]
		}
	]
}

As rendered

[dclaux]

@danmarshall first let me go back to the “bottom then top” example. We can totally make it work, that is what I was alluding to above. The logic would be:

• Before rendering a container, the renderer groups top-aligned, center-aligned and bottom-aligned elements into 3 distinct collections
• Each collection is rendered as an individual container (a stack of elements) in the order the elements were found in the payload
• These individual containers are positioned at the top, center and bottom of the original container.

But the drawback is now that the first element in the payload is rendered visually below the second one. Not the end of the world though. Also, please don’t forget that to support center alignment we’d still need the height property as spece’d here.

Now I assume this is what you’re asking - notice how effortless is to evenly spread these text blocks:

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"height": "stretch",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "This is the top container.",
					"wrap": true
				}
			]
		},
		{
		    "type": "Container",
			"spacing": "large",
			"separator": true,
		    "items": [
		        {
		            "type": "TextBlock",
		            "text": "This is the middle container. Its **height** property is **stretch** so it uses all the remaining vertical space.",
		            "wrap": true
		        }
		    ]
		    
		},
		{
			"type": "ColumnSet",
			"height": "stretch",
			"columns": [
			    {
			        "width": "auto",
			        "items": [
						{
							"type": "Image",
							"url": "http://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg",
							"size": "small",
							"style": "person"
						}
			        ]
			    },
			    {
			        "width": "stretch",
			        "spacing": "large",
			        "separator": true,
			        "items": [
	                    {
	                        "type": "TextBlock",
	                        "height": "stretch",
	                        "text": "It also works within a ColumnSet",
	                        "wrap": true
	                    },
	                    {
	                        "type": "TextBlock",
	                        "height": "stretch",
	                        "text": "Other text",
	                        "wrap": true
	                    },
	                    {
	                        "type": "TextBlock",
	                        "height": "stretch",
	                        "text": "And one more",
	                        "wrap": true
	                    },
			            {
			                "type": "TextBlock",
			                "text": "This text aligns with the bottom",
	                        "wrap": true
			            }
			        ]
			    }
			]
		},
		{
		    "type": "Container",
			"spacing": "large",
			"separator": true,
			"items": [
				{
					"type": "TextBlock",
					"text": "This is the bottom container.",
					"speak": "",
					"wrap": true
				}
			]
		}
	]
}

[paulcam206]

Documentation is done and in the mahiding/site1.1 branch.