minHeight property on containers

[andrewleader]

Release	Renderer status	Tasks status
1.2	✔️ .NET (#2618) ✔️ Android (#2619) ✔️ iOS (#2620) ✔️ TS (#2621) ✔️ UWP (#2622)	✔️ Shared (#2616) ✔️ Designer (#2617)

Solves requests

• Borderless header/footer images Request: Borderless header/footer images #2290
• Full-width images with fixed height and correct fill/crop behavior Request: Full-width images with fixed height and correct fill/crop behavior #2291

Summary

This proposal is an alternative way of solving the above two requests, written up so we can consider both options. Containers can already almost achieve the two above requests except for one thing... you can't set a height on them.

Schema

New property on the following elements...

• Container
• ColumnSet
• Column
• AdaptiveCard

Property	Type	Required	Description
minHeight	null (default) or px	false	Specifies the minimum height of the container.

Example

To achieve the following, where the image is full width but has a fixed height...

I would add a container with a background image, and set the minimum height of the container to 100px (so it's my exact height).

        {
            "type": "Container",
            "backgroundImage": {
              "url": "https://picsum.photos/300/400?image=882"
            },
            "minHeight": "100px"
        }

Now, what if I want the image to go to the edge of the card? I don't want that padding around the edges?

I would simply set bleed=true, and that'll remove the padding.

        {
            "type": "Container",
            "backgroundImage": {
              "url": "https://picsum.photos/300/400?image=882"
            },
            "minHeight": "100px",
            "bleed": true
        }

Host Config

None.

Down-level impact

High. Image won't appear at all (since height on container is ignored down-level, and therefore the container won't have any height).

Host burden

None.

Auto-generated task status

• Shared
• Designer
• .NET
• Android
• iOS
• TS
• UWP

[andrewleader]

Proposal approved!

[dclaux]

I have implemented the feature in the renderer and designer.Allowing for setting height absolutely feels weird in the designer; you can get to super skinny containers that are hard/almost impossible to interact with, and as you add more elements than the container can hold the experience feels broken as well.

I think we should make "height": "50px" mean "minimum height is 50px" (that's what I'm going to do for now), or better even introduce a minHeight property instead.

[paulcam206]

consensus: build minimum height logic and call it minHeight

[mdtauk]

consensus: build minimum height logic and call it minHeight

If you have a Minimum height, why not Maximum with scrolling for bits that overflow or extended out of a container?

[dclaux]

@mdtauk I'll return the question: why do what you suggest? What scenario does it support? Not saying I'm opposed, but it doesn't seem necessary.

[mdtauk]

@mdtauk I'll return the question: why do what you suggest? What scenario does it support? Not saying I'm opposed, but it doesn't seem necessary.

The very fact you would have a Minimum Width property, would make people expect to be a Maximum. Why only constrain in one direction?

[dclaux]

Because there is a reason to have a minimum height (namely what this spec describes) while we have not identified a reason why having a maximum height would be desirable. It's always easier to add new features as necessary rather than introduce it without concrete evidence it's useful and have to live with it forever.

Do you have a concrete scenario in mind that would need a maximum height?

[andrewleader]

We updated the spec so that it's only on containers. This was because minHeight on images behaved oddly... we could make minHeight on images behave as you'd expect (same as setting height property), but since we don't know of any current use cases for minHeight on images or other elements, we're avoiding adding it to those for now.

[andrewleader]

Updating spec to reflect that we also added it to AdaptiveCard