[iOS][Image Rendering][ResourceResolvers] Card elongation

[akaashdev]

Platform

What platform is your issue or question related to? (Delete other platforms).

• iOS

Version

v1.2.11

Details

Cards seems to get long empty spaces when image is set via ResourceResolvers. This sporadically happens on Simulators, but can be frequently noticed on Real Devices in Release Config. (Our Release config is mostly similar to the default Release config)

payloads.zip
card-images.zip

Steps to Reproduce

This happens in Release mode and on real devices

• Configure a tableView with cards in every cell. (Sample payloads provided)
• Populate images using ResourceResolvers

This is noticed on cards that has images contributing to the height of the card. Cards with fixed height don't seem to have this issue.

Visual Debugger Screenshot

[jwoo-msft]

@akaashdev
Hi,

1. Does this happen if you don't use placeholder image via resource resolver, in other word, can you try set the image without setting the place holder image?
2. Does this happen without image?

[akaashdev]

@jwoo-msft

1. Yep. This happens even when the original is directly set, without having a placeholder first.
2. The cards get empty spaces without an image also. But, the places are different. Without an image, the imageView gets a abnormal height, whereas with an image there is a new UIView in-between the buttons that takes some extra height.

Behaviour when image is not set

[jwoo-msft]

@akaashdev
Hi,

For the first case,
It appears that the constraints may not have been set properly on the image view. Can you ensure that you enqued the task of setting an image to the image view in the main queue to remove the synchronization as a factor as mentioned in #4650?

In 2nd case, was the image view on the card? Maybe the empty image view might have caused the issue. You can also try to remove extra view by removing the container that wraps ActionSet.

If you could share constraints between the stack view that holds AdaptiveCard view and a contentView, and compression resistance and hugging priority values via e-mail, that will be very helpful.

 {
         "items":[
            {
               "actions":[
                  {
                     "data":{
                        "lessonIndex":2,
                        "nextLesson":true
                     },
                     "title":"Next Lesson: Advantages of Using Cards",
                     "type":"Action.Submit"
                  }
               ],
               "horizontalAlignment":"Center",
               "type":"ActionSet"
            }
         ],
         "type":"Container"
 }

The whole payload.

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "actions":[
      {
         "card":{
            "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
            "body":[
               {
                  "items":[
                     {
                        "text":"Available Lessons:",
                        "type":"TextBlock"
                     },
                     {
                        "choices":[
                           {
                              "title":"Introduction",
                              "value":"0"
                           },
                           {
                              "title":"Lesson 1: What is a Card?",
                              "value":"1"
                           },
                           {
                              "title":"Lesson 2: Advantages of Using Cards",
                              "value":"2"
                           },
                           {
                              "title":"Lesson 3: Card Specifications",
                              "value":"3"
                           },
                           {
                              "title":"Lesson 4: Designing a Card",
                              "value":"4"
                           },
                           {
                              "title":"Lesson 5: Webex Card Designer Tool",
                              "value":"5"
                           },
                           {
                              "title":"Lesson 6: Sending A Card to Webex Teams",
                              "value":"6"
                           },
                           {
                              "title":"Lesson 7: How This App Sends Cards",
                              "value":"7"
                           },
                           {
                              "title":"Lesson 8: Displaying Dynamic Content",
                              "value":"8"
                           },
                           {
                              "title":"Lesson 9: Buttons and Actions",
                              "value":"9"
                           },
                           {
                              "title":"Lesson 10: Registering for Button Press Events",
                              "value":"10"
                           },
                           {
                              "title":"Lesson 11: Processing Button Events",
                              "value":"11"
                           },
                           {
                              "title":"Lesson 12: How This App Handles Events",
                              "value":"12"
                           },
                           {
                              "title":"Lesson 13: Form with Buttons Demo",
                              "value":"13"
                           },
                           {
                              "title":"Lesson 14: Lesson 14: Guidelines & Best Practices",
                              "value":"14"
                           }
                        ],
                        "id":"jumpToLessonIndex",
                        "type":"Input.ChoiceSet",
                        "value":"2"
                     },
                     {
                        "actions":[
                           {
                              "data":{
                                 "nextLesson":false,
                                 "pickAnotherLesson":true
                              },
                              "id":"gotoLesson",
                              "title":"Go To Lesson!",
                              "type":"Action.Submit"
                           }
                        ],
                        "type":"ActionSet"
                     }
                  ],
                  "type":"Container"
               }
            ],
            "type":"AdaptiveCard"
         },
         "title":"Pick Another Lesson",
         "type":"Action.ShowCard"
      },
      {
         "card":{
            "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
            "body":[
               {
                  "text":"* [Join the 'Ask B&C School' Webex Teams Space](https://eurl.io/#SJiS9VKTH)\n* [View the Source for This Card](https://developer.webex.com/buttons-and-cards-designer/lesson-1)\n* [View the Source for This App](https://github.com/WebexSamples/webex-card-school)\n* [Official Developer Guide](https://developer.webex.com/docs/api/guides/cards)\n* [Buttons and Cards Designer](https://developer.webex.com/buttons-and-cards-designer)\n* [Adaptive Card Schema Explorer](https://adaptivecards.io/explorer/)\n* [Cisco DevNet: Card Sample App](https://developer.cisco.com/codeexchange/github/repo/CiscoDevNet/webex-card-sample/) ",
                  "type":"TextBlock",
                  "wrap":true
               },
               {
                  "items":[
                     {
                        "text":"Do you have questions, comments or suggestions?\n\nWe'd love to get your feedback on this bot or any aspect of the Webex Teams Buttons and Cards feature.",
                        "type":"TextBlock",
                        "wrap":true
                     },
                     {
                        "id":"feedback",
                        "isMultiline":true,
                        "placeholder":"Enter your feedback",
                        "type":"Input.Text"
                     },
                     {
                        "actions":[
                           {
                              "data":{

                              },
                              "title":"Send Feedback",
                              "type":"Action.Submit"
                           }
                        ],
                        "type":"ActionSet"
                     }
                  ],
                  "type":"Container"
               }
            ],
            "type":"AdaptiveCard"
         },
         "title":"Helpful Resources",
         "type":"Action.ShowCard"
      }
   ],
   "body":[
      {
         "size":"medium",
         "text":"Lesson 1: What is a Card?",
         "type":"TextBlock",
         "weight":"bolder"
      },
      {
         "altText":"",
         "id":"0",
         "type":"Image",
         "url":"customscheme://cardcontents/info?contentId=xyz0"
      },
      {
         "text":"Cards provide a way for Applications (bots or integrations) to share and collect information in Webex Teams.\n\n",
         "type":"TextBlock",
         "wrap":true
      },
      {
         "text":"Cards can display rich information including images, formatted text and links. They can also be used to collect detailed information from Webex Teams users that would be difficult to obtain using a purely text based interface. ",
         "type":"TextBlock",
         "wrap":true
      },
      {
         "text":"Even cards that only show informational messages, such as the current weather conditions, flight statuses, or internal service alerts really stand out over text-only dialogue. ",
         "type":"TextBlock",
         "wrap":true
      },
      {
         "text":"Where they really shine though, are in the interactions that solicit complex feedback from the user, such as responding to a poll or submitting a registration form.  We'll demonstrate this in the next lesson.",
         "type":"TextBlock",
         "wrap":true
      },
      {
         "choices":[
            {
               "title":"This hidden choice ensures that myCardIndex is returned with every Action.Submit attachmentAction",
               "value":"1"
            }
         ],
         "id":"myCardIndex",
         "isMultiSelect":false,
         "isVisible":false,
         "type":"Input.ChoiceSet",
         "value":"1"
      },
      {
        "actions":[
            {
                "data":{
                "lessonIndex":2,
                "nextLesson":true
                },
                "title":"Next Lesson: Advantages of Using Cards",
                "type":"Action.Submit"
            }
        ],
        "horizontalAlignment":"Center",
        "type":"ActionSet"
    }     
   ],
   "type":"AdaptiveCard",
   "version":"1.0"
}

[akaashdev]

@jwoo-msft
We're sure that it has been properly enqueued in the main thread while setting the image (we should have ran into several other issues if it wasn't). This happens only on few cards where the image contributes to the height of the card.
Will share you the requested constraints via e-mail.
Thanks 👍

[ghost]

Hi @akaashdev. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions.

[shalinijoshi19]

@jwoo-msft what's the work pending on us here?

[ghost]

🎉AdaptiveCards@1.2.13 has been released which fixes this issue.:tada:

Handy links:

• Release Notes
• AdaptiveCards Website
• Official NPM Designer Release
• Official NPM Templating Release
• Official NPM Renderer Release
• Official Nuget Templating Release
• Official Nuget Renderer Release
• Official Maven Renderer Release
• Official CocoaPod Renderer Release

[ghost]

🎉This issue is now fixed by #4897 and successfully released as part of our AdaptiveCards@2020.10 offering.:tada:

Handy links:

• Release Notes
• AdaptiveCards Website
• Official NPM Designer Release
• Official NPM Templating Release
• Official NPM Renderer Release
• Official Nuget Templating Release
• Official Nuget Renderer Release
• Official Maven Renderer Release
• Official CocoaPod Renderer Release