Skip to content

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

@shabripabba

Description

@shabripabba

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions