Skip to content

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

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

Activity

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

Metadata

Metadata

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions