AdaptiveCards icon indicating copy to clipboard operation
AdaptiveCards copied to clipboard

[ReactNative]Fix ReactNative column layout issue

Open feiyin0719 opened this issue 3 years ago • 4 comments

Related Issue

fix [#7477]

Description

Fix column layout issue, the column flex is set error For px, we only need to set width and height For weight, we set flex For auto, we should set flex to 0, and not set size, it will calculate the size with children For stretch, we set flex to 1 And we should set the flexShrink to point up which element need to scale

Precedence order of displaying elements with the width attribute px > weight > auto > stretch

Sample Card

{
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://searchuxcdn.azureedge.net/designerapp/images/servicenow-icon.png",
                            "size": "Small",
                            "horizontalAlignment": "Center",
                            "altText": "Not available"
                        }
                    ],
                    "height": "stretch"
                },
                {
                    "type": "Column",
                    "width": 8,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "[KB0033192 OneITVSO: Create Repos In a Test Instance and Provide Force Push Access](https://microsoft.service-now.com/kb_view.do?sys_kb_id=713adb5d131fd6003976bc42f244b0f2)",
                            "color": "Accent",
                            "size": "Medium",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Last modified {{DATE(2022-03-21T14:02:23Z,SHORT)}}",
                            "spacing": "None"
                        },
                        {
                            "type": "TextBlock",
                            "text": " 1. You can create repositories through the web application 2. For links to both Prod and Staging, ...",
                            "wrap": true,
                            "maxLines": 3,
                            "spacing": "Small",
                            "color": "Dark"
                        }
                    ],
                    "horizontalAlignment": "Center",
                    "spacing": "Medium"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

How Verified

  1. open ReactNative Column.Auto
image
Microsoft Reviewers: Open in CodeFlow

feiyin0719 avatar May 25 '22 07:05 feiyin0719

Hi @feiyin0719. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

ghost avatar May 30 '22 16:05 ghost

Staleness reset by licanhua

ghost avatar Aug 24 '22 18:08 ghost

Hi @feiyin0719. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along.

ghost avatar Aug 30 '22 16:08 ghost

@paulcam206 @jwoo-msft Should this PR be closed?

anna-dingler avatar Jun 24 '24 18:06 anna-dingler