microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.
https://adaptivecards.io
MIT License
1.75k stars 550 forks source link

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

Closed akaashdev closed 3 years ago

akaashdev commented 4 years ago

Platform

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

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

IMG_3087 IMG_3088

Steps to Reproduce

This happens in Release mode and on real devices

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

Screenshot 2020-08-26 at 3 07 54 PM
jwoo-msft commented 4 years ago

@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 commented 4 years ago

@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

elongation-of-card

jwoo-msft commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

shalinijoshi19 commented 4 years ago

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

ghost commented 3 years ago

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

Handy links:

ghost commented 3 years ago

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

Handy links: