Share via

Badge on Teams Mobile when Dialog is open is not stable

Mohamed Yassine Landolsi 40 Reputation points
2026-06-18T16:54:12.6+00:00

User's image

User's image

Both screens happens with same steps to reproduce , just click on this specific action to trigger the dialog.

1st try : Badge shows up trimmed , while in the second try it shows completly fine !

User's image

Is there workaround to ensure badge always shows up correctly ? 

<ItemGroup>
    <PackageReference Include="AdaptiveCards" Version="3.1.0" />
    <PackageReference Include="AdaptiveCards.Templating" Version="2.0.5" />
    <PackageReference Include="Microsoft.Agents.Authentication" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Authentication.Msal" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Builder.Dialogs" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Core" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Extensions.Teams" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Hosting.AspNetCore" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Storage" Version="1.5.184" />
    <PackageReference Include="Microsoft.Agents.Storage.Blobs" Version="1.5.184" />
  </ItemGroup>
Microsoft Teams | Development
Microsoft Teams | Development

Building, integrating, or customizing apps and workflows within Microsoft Teams using developer tools and APIs

0 comments

Answer accepted by question author

Hin-V 15,490 Reputation points Microsoft External Staff Moderator
2026-06-18T21:24:18.38+00:00

Please note that our forum is a public platform, and we will modify your question to hide your personal information in the description. Kindly ensure that you hide any personal or organizational information the next time you post an error or other details to protect personal data.  

Hi Mohamed

Thank you for reaching out.  

Based on your description, this behavior is likely related to how the Teams iOS mobile renderer handles Adaptive Cards with more complex layouts, particularly when using ColumnSet and Badge elements within a task module or dialog. As far as I know, on iOS devices, the narrower screen width can make ColumnSet layouts more susceptible to truncation or inconsistent rendering. As a result, the badge may sometimes appear clipped or display correctly depending on how the layout is adjusted at runtime. 

As potential workarounds, you can try to: 

Reducing the badge size from "size": "Large" to "size": "Medium" to improve fit within constrained layouts.

Downgrading the Adaptive Card schema version to "version": "1.2" or "1.5" for more stable rendering on mobile.

Simplifying the ColumnSet structure, or replacing the Badge with a styled TextBlock (for example, using background color and padding) to simulate a similar visual effect.

Please note that this summary is based on my own findings and may not fully address your concerns. To help you reach your goal more effectively, I recommend engaging with [GitHub Community Forum] for a deeper technical dive or to connect with individuals who have relevant experience and expertise. Some approaches may behave differently or be restricted depending on your specific environment and configuration. These forums include many experienced developers and Microsoft specialists who can assist with troubleshooting and guidance.   

Apologies for redirecting you to the related development team support. As moderators in this community, we do not have access to your specific tenant configuration, and my testing environment is limited. Therefore, my guidance is based on available Microsoft documentation and resources. That said, I’ll do my best to provide additional insight where possible.   

If you have any additional concerns, feel free to comment below. I would be more than happy to assist. 

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.  

Was this answer helpful?

1 person found this answer helpful.

2 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Mohamed Yassine Landolsi 40 Reputation points
    2026-06-18T16:56:02.18+00:00 
      {
    "type": "ColumnSet",
    "isVisible": "${ShowStatusBadge}",
    "columns": [
      {
        "type": "Column",
        "width": "stretch",
        "items": [
          {
            "type": "TextBlock",
            "text": "${BudgetText}",
            "isSubtle": true
          }
        ]
      },
      {
        "type": "Column",
        "width": "auto",
        "horizontalAlignment": "Right",
        "items": [
          {
            "type": "Badge",
            "text": "${StatusText}",
            "size": "Large",
            "style": "${StatusStyle}",
            "icon": "${StatusIcon}",
            "appearance": "Tint",
            "shape": "Rounded"
          }
        ]
      }
    ]
  },

    Was this answer helpful?

    0 comments
  2. Mohamed Yassine Landolsi 40 Reputation points
    2026-06-18T16:54:23.0766667+00:00

    Adaptive card version : 1.6

    \n

    Phone : Iphone 11

    Was this answer helpful?

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.