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 
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:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"border": true,
"items": [
{
"$data": "{properties}",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"id": "{id}",
"type": "Input.Toggle",
"title": " ",
"value": "false",
"wrap": false
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Container",
"items": [
{
"type": "FactSet",
"facts": [
{
"$data": "{peers}",
"title": "{key}",
"value": "{value}"
}
]
}
],
"style": "emphasis"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "{actionSubmitTitle}",
"horizontalAlignment": "center"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Sample Data Editor:
"properties":[
{
"id":"InputToggle1",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle2",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle3",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
},
{
"id":"InputToggle4",
"peers":[
{
"key":"Project",
"value":"' .$task->project_name. '"
},
{
"key":"Task",
"value":"'.$task->id.' - '.$task->heading.'"
},
{
"key":"Status",
"value":"'.$task->board_column.'"
}
]
}
],
"actionSubmitTitle":"Update Timesheet"
}
The InputToggle is inside the column set with width as auto and it is perfectly rendering in Microsoft 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.
Edit: Adding final JSON sent to the bot. The columns in the column set will be changed dynamically based on the ask list in database.
{
"type":"AdaptiveCard",
"version":"1.0",
"body":[
{
"type":"Container",
"border":true,
"items":[
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"width":"auto",
"items":[
{
"id":"inputToggle1",
"type":"Input.Toggle",
"title":" ",
"value":"false",
"wrap":false
}
]
},
{
"type":"Column",
"width":"stretch",
"items":[
{
"type":"Container",
"items":[
{
"type":"FactSet",
"facts":[
{
"title":"Project",
"value":"Project 1"
},
{
"title":"Task",
"value":"Task 1"
},
{
"title":"Status",
"value":"Pending"
}
]
}
],
"style":"emphasis"
}
]
}
]
},
{
"type":"ColumnSet",
"columns":[
{
"type":"Column",
"width":"auto",
"items":[
{
"id":"inputToggle2",
"type":"Input.Toggle",
"title":" ",
"value":"false",
"wrap":false
}
]
},
{
"type":"Column",
"width":"stretch",
"items":[
{
"type":"Container",
"items":[
{
"type":"FactSet",
"facts":[
{
"title":"Project",
"value":"Project 1"
},
{
"title":"Task",
"value":" Task 2"
},
{
"title":"Status",
"value":"Completed"
}
]
}
],
"style":"emphasis"
}
]
}
]
}
]
}
],
"actions":[
{
"type":"Action.Submit",
"title":"Update Timesheet",
"horizontalAlignment":"center"
}
],
"$schema":"http://adaptivecards.io/schemas/adaptive-card.json"
}
Thank you.
