[Ios] [Adaptive Cards Input Toggle(CheckBox) display issue in Iphone]

[bhsnagasai]

Platform

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

• iOS

Author or host

Ms Teams

Details

We have created bot using Microsoft bot-framework which is integrated to Microsoft teams. We have created few adaptive cards for interactive conversation with bot. One of the Adaptive card is causing design issue in IPhone X Microsoft Teams Application.

We used Adaptive card template for building this card which displays the list of Tasks along with status of the task. Each task has Input.Toggle (Checkbox) and at the end a button will be displayed. When Checkbox's are selected and button is clicked. Sample design as shown Adaptive Card Design Preview

We are sending new card with task details where they can edit the status and so on. Please find the JSON data below.

Card Payload Editor Json Data:
Card Payload.txt

Sample Data Editor:
Sample Data.txt

The InputToggle is inside the column set with width as auto and it is perfectly rendering in Microsoft Teams Desktop and Android App but whereas in IOS app it is not showing.

When we set the width property to stretch, InputToggle is getting displayed in IOS App in big size but in Desktop App and Android App the column is pushing and occupying much space.

Please help me so that we can display the Input.Toggle in IOS Microsoft Teams without breaking the design in Desktop and Android Teams App.

Adding final JSON sent to the bot. The columns in the column set will be changed dynamically based on the ask list in database.

Final Json.txt

Thank you.

[Gousia-Begum]

@monogo Thanks for reporting this! We could repro the issue and we have raised a bug for it.

[shalinijoshi19]

@monogo what templating library are you using here and how are you rendering on iOS- is it via Teams (and thus our native iOS renderer)? FYI that we are in the middle of reworking our templating packages for JS + .NET and releasing an update within the next few weeks so do watch the releases page for that. Meanwhile @jwoo-msft yet another test card for us to test out with the templating packages albeit .NET.

[ghost]

Hi @monogo. We have acknowledged this issue report. Please continue to follow this issue for updates/progress/questions. @matthidinger / @dclaux / @RebeccaAnne / @paulcam206 / @jwoo-msft / @almedina-ms FYI.

[bhsnagasai]

@shalinijoshi19 thanks for the reply. We are building JSON using Adaptive templating service and sending/receiving messages via REST api .
The adaptive card is getting rendered in the IOS Teams mobile app.

[ghost]

Thanks @monogo for following up on this issue. A member of our triage crew will re-engage as soon as possible to follow up. Thanks.

[shalinijoshi19]

@VikrantSingh01 are you aware of this issue with Input.Toggle on iOS? @jwoo-msft thoughts here?

[ghost]

🎉AdaptiveCards@v1.2.10 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