microsoft / microsoft/AdaptiveCards

[iOS][Rendering] Card text formatting

Open
#7,653 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Renderers Bug Partner-CiscoWebEx Platform-iOS
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

iOS

SDK Version

Commit - https://github.com/microsoft/AdaptiveCards/commit/9c514851cb4a780dcb654b8c89b9f9d24c77c680

Application Name

Webex

Problem Description

On iPad the text is not wrapping correctly and shows only first line of the text followed by ...
Similar issue is also observed on iPhone when in Landscape orientation 1 time.
As the Microsoft's visualiser app doesn't support iPad, I'm unable to test the JSON in the app.

Screenshots
Screenshot 2022-07-07 at 1 24 44 PM
Card JSON
{
        "type": "AdaptiveCard",
        "version": "1.2",
        "body": [
          {
            "type": "TextBlock",
            "size": "medium",
            "weight": "bolder",
            "text": "Resoruce",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "From Darth Vader",
            "spacing": "small"
          },
          {
            "type": "TextBlock",
            "text": "Whenever I try to start my minecraft launcher, I keep getting this error message: “Minecraft Launcher is currently not available in your account. Make sure you are signed in to the Store and try again. Here’s the error code, in case you need it: 0x803F8001.” So far I haven’t found out how to fix this. It would be great if I could get some help.",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": " ",
            "wrap": true,
            "spacing": "none"
          },
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "medium",
                "weight": "bolder",
                "text": "Call to Action",
                "wrap": true
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                      {
                        "type": "TextBlock",
                        "text": "From just a video **game**, Minecraft has turned into a sensation enjoyed by people of all ages. It is one of the best-selling video games of all time with more than *140 million* active users every month.",
                        "wrap": true
                      },
                      {
                        "type": "TextBlock",
                        "text": "This is second para with some ***styling*** and a [link](https://www.cisco.com).",
                        "wrap": true
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  },
                  {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                      {
                        "type": "ActionSet",
                        "actions": [
                          {
                            "type": "Action.OpenUrl",
                            "url": "https://www.cisco.com",
                            "title": "Click Here"
                          }
                        ]
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  }
                ]
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                      {
                        "type": "TextBlock",
                        "text": "(2) From just a *video game*, Minecraft has turned into a sensation enjoyed by people of all ages. It is one of the best-selling video games of all time with more than **140 million** active users every month.",
                        "wrap": true
                      },
                      {
                        "type": "TextBlock",
                        "text": "And a second para.",
                        "wrap": true
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  },
                  {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                      {
                        "type": "ActionSet",
                        "actions": [
                          {
                            "type": "Action.OpenUrl",
                            "url": "https://www.cisco.com",
                            "title": "Click Here"
                          }
                        ]
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  }
                ],
                "spacing": "extraLarge"
              },
              {
                "type": "ColumnSet",
                "columns": [
                  {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                      {
                        "type": "TextBlock",
                        "size": "extraLarge",
                        "weight": "bolder",
                        "text": "Monthly highlights",
                        "wrap": true
                      },
                      {
                        "type": "TextBlock",
                        "text": "More than 3,000,000 leads",
                        "wrap": true
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  },
                  {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                      {
                        "type": "ActionSet",
                        "actions": [
                          {
                            "type": "Action.OpenUrl",
                            "url": "https://piunikaweb.com/",
                            "title": "Click Here"
                          }
                        ]
                      }
                    ],
                    "verticalContentAlignment": "bottom"
                  }
                ]
              }
            ],
            "style": "accent"
          },
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "size": "medium",
                "weight": "bolder",
                "text": "Feedback",
                "wrap": true
              },
              {
                "type": "TextBlock",
                "text": "What's your problem?",
                "wrap": true
              },
              {
                "type": "Input.Text",
                "id": "Feedback1",
                "isMultiline": true,
                "maxLength": 300,
                "spacing": "none"
              },
              {
                "type": "TextBlock",
                "text": "Need support?",
                "wrap": true,
                "spacing": "small"
              },
              {
                "type": "Input.Text",
                "id": "Feedback2",
                "isMultiline": true,
                "maxLength": 300,
                "spacing": "none"
              },
              {
                "type": "ActionSet",
                "actions": [
                  {
                    "type": "Action.Submit",
                    "data": {
                      "action": "UpdateFeedback",
                      "updateid": "35cfdbcb-930a-49f8-a258-6b7579741ea4",
                      "updatelogid": "fccff77b-9e36-49ec-bf00-25710a8cbdec",
                      "istest": "True"
                    },
                    "title": "Submit Feedback"
                  }
                ],
                "spacing": "none"
              }
            ],
            "style": "default"
          },
          {
            "type": "Input.Text",
            "id": "cardId",
            "value": "UpdateCard",
            "isVisible": false
          }
        ]
      }
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied card JSON on iPad and on iPhone in landscape, then trace the iOS rendering path for wrapped TextBlock content and the nested ColumnSets. Done means the full text wraps instead of showing only its first line followed by an ellipsis in the reported layouts.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.