Button alignment in Adaptive cards - node.js

Question

I was wondering if there is a way to control alignment of buttons in Adaptive card in Bot Emulator.
I tried the same code in the emulator, and the Microsoft Visualizer, but they render differently. Here are the images: Emulator Visualizer
Here's the code I've used:
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
'$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
'version': '1.0',
'type': 'AdaptiveCard',
'body': [
{
'type': 'TextBlock',
'text': 'Meeting Title',
'weight': 'bolder'
},
{
'type': 'TextBlock',
'text': 'Location',
'separator': true,
'isSubtle': true,
'size': 'small'
},
{
'type': 'TextBlock',
'text': 'Location',
'spacing': 'none'
},
{
'type': 'TextBlock',
'text': 'Organizer',
'separator': true,
'isSubtle': true,
'size': 'small'
},
{
'type': 'TextBlock',
'text': 'Organizer Name',
'spacing': 'none'
},
{
'type': 'TextBlock',
'text': 'Start Time',
'separator': true,
'isSubtle': true,
'size': 'small'
},
{
'type': 'ColumnSet',
'spacing': 'none',
'columns': [
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': '05:00 PM',
'isSubtle': false,
'weight': 'bolder'
}
]
},
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': 'May 21'
}
]
},
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': '2017',
'isSubtle': true,
'weight': 'bolder'
}
]
}
]
},
{
'type': 'TextBlock',
'text': 'End Time',
'separator': true,
'isSubtle': true,
'size': 'small'
},
{
'type': 'ColumnSet',
'spacing': 'none',
'columns': [
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': '05:30 PM',
'isSubtle': false,
'weight': 'bolder'
}
]
},
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': 'May 21'
}
]
},
{
'type': 'Column',
'width': 'auto',
'items': [
{
'type': 'TextBlock',
'text': '2017',
'isSubtle': true,
'weight': 'bolder'
}
]
}
]
}
],
'actions': [
{
'type': 'Action.Submit',
'title': 'Accept',
'data':{
'accept': true
}
},
{
'type': 'Action.Submit',
'title': 'Decline',
'data':{
'accept': false
}
}
]
}
}
As seen, the buttons are aligned horizontally in the emulator, and next to each other in the visualizer. Is there a way to modify the height and width of the buttons, as well as the way they are aligned?

Answer 1

I was wondering if there is a way to control alignment of buttons in
Adaptive card in Bot Emulator.
Short answer is "No". You cannot modify the render of components in the Emulator.
Long answer is: Bot Framework Emulator is open-source, so you can try to modify and run locally your custom emulator. But I'm not sure that making a custom render on the emulator is very useful for real projects, as they will not run on the emulator.
Emulator sources are located here: https://github.com/Microsoft/BotFramework-Emulator

Answer 2

There is something called Hostconfig with Adaptive cards, try using that. Have shared the editor tool link.