Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ReactNative]Fix ReactNative column layout issue #7480

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

feiyin0719
Copy link

@feiyin0719 feiyin0719 commented May 25, 2022

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 feiyin0719 changed the title Fix ReactNative column layout issue [ReactNative]Fix ReactNative column layout issue May 25, 2022
@ghost ghost added the no-recent-activity label May 30, 2022
@ghost
Copy link

ghost commented May 30, 2022

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 ghost removed the no-recent-activity label Aug 24, 2022
@ghost
Copy link

ghost commented Aug 24, 2022

Staleness reset by licanhua

@ghost ghost added the no-recent-activity label Aug 30, 2022
@ghost
Copy link

ghost commented Aug 30, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant