How to set column width in adaptive card so its uniform - botframework

Question

I'm trying to ask user informations in adaptive card. But the column size is varying because of which the card looks clumsy. How can I make it look good with uniform gap between each columnset columns. I tried using width as "Auto" and "Stretch" I even tried setting width with "50px" and "100px" but I didn't achieve.
Kindly help me on this.
Edit 1: Adding Code
I'm creating card in C#
Here is my code
AdaptiveCard card = new AdaptiveCard()
{
Body = new List<AdaptiveElement>()
{
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*First Name",
Weight = AdaptiveTextWeight.Bolder
},
} ,
Width = AdaptiveColumnWidth.Auto
},
new AdaptiveColumn()
{
Width = AdaptiveColumnWidth.Auto,
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "FirstName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
}, // First Name
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="Middle Name",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "MiddleName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
},
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*Last Name",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveTextInput()
{
Id = "LastName",
MaxLength = 300,
Style = AdaptiveTextInputStyle.Text,
},
}
}
}
},
new AdaptiveColumnSet()
{
Columns = new List<AdaptiveColumn>
{
new AdaptiveColumn()
{
Items = new List<AdaptiveElement>()
{
new AdaptiveTextBlock()
{
Text="*Date Of Birth",
Weight = AdaptiveTextWeight.Bolder
},
}
},
new AdaptiveColumn()
{
Width = "stretch",
Separator = true,
Items=new List<AdaptiveElement>()
{
new AdaptiveDateInput()
{
Id = "DoB",
},
}
}
}
}, // Date Of Birth
}
};

Answer 1

first of all you could control your card a lot easier if you'd have a look at templating.
Creating cards in code like that is soooort of deprecated, you can still use it but using json directly and templating is way more convinient.
To answer your question, yes you can can set width of columns in either pixel, stretch, automatic or weighted. Similar to this example:
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 25,
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch"
}
]
You have to set all the label columns in your example to the same size. Easiest is by just setting them to a fixed width or weighted.
If this does not work, make sure the term is used correct, you have to use a lower case "stretch" and width when weighted has to be an integer, You can try this in the designer. Adaptive Cards as such doesn't really care about "Stretch" or "stretch" but webchat for example has some issues around that, also the card version has to match what your host supports.
Easiest way, and thats where templating comes in again, is to design and try your card in the designer. If its fine in the designer it usually is in the host you want to render the card.
Hope thats helpful for you