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

[Rendering][iOS]Image not centered and background looks stretched #6220

Closed
shabripabba opened this issue Aug 18, 2021 · 0 comments · Fixed by #6234
Closed

[Rendering][iOS]Image not centered and background looks stretched #6220

shabripabba opened this issue Aug 18, 2021 · 0 comments · Fixed by #6234
Assignees
Projects

Comments

@shabripabba
Copy link
Contributor

shabripabba commented Aug 18, 2021

Target Platform

Please list the platform(s) that your application is targeting and remove platforms you are not targeting:

  • iOS

Target Application

Please provide the name of the application that is rendering the card (ex: Outlook, Teams, etc)
Teams

Problem Description

Please enter a description of the issue. If you just have a question, please post on StackOverflow instead
An adaptive card with a container with an image that is supposed to be centered and have another background image renders incorrectly compared to how it is rendered on the designer.

Screenshot

Please provide a screenshot of the problem (if possible)
The first Image is the Designer and the second one is the test App.
MicrosoftTeams-image (12)

MicrosoftTeams-image (13)

Card JSON

Please provide the JSON of the Card that is being rendered

{
  "body": [
    {
      "columns": [
        {
          "items": [
            {
              "items": [
                {
                  "horizontalAlignment": "center",
                  "type": "Image",
                  "url": "https://i.ibb.co/dK8gNM6/375132.png",
                  "height": "auto"
                }
              ],
              "type": "Container",
              "backgroundImage": "https://i.ibb.co/fS6nNQj/3751322.png",
              "bleed": true
            },
            {
              "bleed": true,
              "style": "emphasis",
              "items": [
                {
                  "size": "extraLarge",
                  "wrap": true,
                  "color": "accent",
                  "weight": "lighter",
                  "type": "TextBlock",
                  "text": "Flight to Paris"
                },
                {
                  "spacing": "Small",
                  "text": "Delta Air Lines flight 8471",
                  "type": "TextBlock",
                  "wrap": true
                },
                {
                  "spacing": "None",
                  "text": "Confirmation code: ABCDEF",
                  "type": "TextBlock",
                  "wrap": true
                },
                {
                  "spacing": "None",
                  "text": "10 hours 45 minutes",
                  "type": "TextBlock",
                  "wrap": true
                }
              ],
              "height": "stretch",
              "type": "Container",
              "spacing": "None"
            }
          ],
          "width": "45",
          "height": "stretch",
          "type": "Column"
        },
        {
          "width": "55",
          "items": [
            {
              "items": [
                {
                  "columns": [
                    {
                      "width": "auto",
                      "items": [
                        {
                          "size": "extraLarge",
                          "weight": "lighter",
                          "type": "TextBlock",
                          "text": "BLR"
                        }
                      ],
                      "type": "Column"
                    },
                    {
                      "verticalContentAlignment": "center",
                      "items": [
                        {
                          "height": "2px",
                          "type": "Image",
                          "url": "https:\/\/urlp.asm.skype.com\/v1\/url\/content?url=https%3a%2f%2fmessagecardplayground.azurewebsites.net%2fassets%2fgraydot2x2.png",
                          "width": "10000px"
                        }
                      ],
                      "width": "stretch",
                      "type": "Column"
                    },
                    {
                      "verticalContentAlignment": "center",
                      "items": [
                        {
                          "url": "https:\/\/urlp.asm.skype.com\/v1\/url\/content?url=https%3a%2f%2fmessagecardplayground.azurewebsites.net%2fassets%2fsmallairplane.png",
                          "type": "Image",
                          "height": "16px"
                        }
                      ],
                      "width": "auto",
                      "type": "Column",
                      "spacing": "Small"
                    },
                    {
                      "width": "auto",
                      "items": [
                        {
                          "size": "extraLarge",
                          "horizontalAlignment": "right",
                          "weight": "lighter",
                          "type": "TextBlock",
                          "text": "CDG"
                        }
                      ],
                      "type": "Column"
                    }
                  ],
                  "type": "ColumnSet"
                },
                {
                  "columns": [
                    {
                      "width": "1",
                      "items": [
                        {
                          "type": "TextBlock",
                          "size": "medium",
                          "text": "1:55 AM"
                        }
                      ],
                      "type": "Column"
                    },
                    {
                      "width": "1",
                      "items": [
                        {
                          "size": "medium",
                          "horizontalAlignment": "right",
                          "type": "TextBlock",
                          "text": "8:10 AM"
                        }
                      ],
                      "type": "Column"
                    }
                  ],
                  "type": "ColumnSet"
                },
                {
                  "columns": [
                    {
                      "width": "1",
                      "items": [
                        {
                          "text": "November 12, 2017",
                          "isSubtle": true,
                          "type": "TextBlock",
                          "wrap": true
                        }
                      ],
                      "type": "Column"
                    },
                    {
                      "width": "1",
                      "items": [
                        {
                          "wrap": true,
                          "horizontalAlignment": "right",
                          "isSubtle": true,
                          "type": "TextBlock",
                          "text": "November 12, 2017"
                        }
                      ],
                      "type": "Column"
                    }
                  ],
                  "spacing": "None",
                  "type": "ColumnSet"
                },
                {
                  "columns": [
                    {
                      "width": "1",
                      "items": [
                        {
                          "type": "TextBlock",
                          "text": "Bengaluru",
                          "isSubtle": true
                        }
                      ],
                      "type": "Column"
                    },
                    {
                      "width": "1",
                      "items": [
                        {
                          "horizontalAlignment": "right",
                          "isSubtle": true,
                          "type": "TextBlock",
                          "text": "Paris"
                        }
                      ],
                      "type": "Column"
                    }
                  ],
                  "height": "stretch",
                  "type": "ColumnSet",
                  "spacing": "None"
                },
                {
                  "separator": true,
                  "actions": [
                    {
                      "title": "Check in",
                      "style": "positive",
                      "type": "Action.Submit"
                    },
                    {
                      "title": "View in calendar",
                      "type": "Action.Submit"
                    }
                  ],
                  "type": "ActionSet",
                  "spacing": "Medium"
                }
              ],
              "type": "Container",
              "height": "stretch"
            }
          ],
          "type": "Column"
        }
      ],
      "type": "ColumnSet",
      "height": "stretch"
    }
  ],
  "$schema": "http:\/\/adaptivecards.io\/schemas\/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0"
}

Sample Code

Please provide any relevant code samples to help reproduce the issue

Version of SDK

What version are you using? Ex: NuGet 1.0.2, or latest main, etc...
2.8.0-beata1

@jonmill jonmill added this to P1 in Triage Aug 20, 2021
jwoo-msft added a commit that referenced this issue Aug 21, 2021
@jwoo-msft jwoo-msft mentioned this issue Aug 21, 2021
@jwoo-msft jwoo-msft self-assigned this Aug 21, 2021
@jwoo-msft jwoo-msft added this to the 21.08 milestone Aug 21, 2021
@jonmill jonmill moved this from P1 to P0 in Triage Aug 25, 2021
Triage automation moved this from P0 to Closed Aug 25, 2021
jwoo-msft added a commit that referenced this issue Aug 25, 2021
* [iOS] Fixed #6219

* Updated sample card

* [iOS] Fixes 6222

* [iOS] Fixed #6220

* [iOS] added accessors
michaelfarnsworth pushed a commit to michaelfarnsworth/AdaptiveCards that referenced this issue Nov 10, 2022
* [iOS] Fixed microsoft#6219

* Updated sample card

* [iOS] Fixes 6222

* [iOS] Fixed microsoft#6220

* [iOS] added accessors
rankush pushed a commit to rankush/AdaptiveCards that referenced this issue May 8, 2024
* [iOS] Fixed microsoft#6219

* Updated sample card

* [iOS] Fixes 6222

* [iOS] Fixed microsoft#6220

* [iOS] added accessors
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Triage
Closed
Development

Successfully merging a pull request may close this issue.

3 participants