Search code examples
c#botframeworkmicrosoft-teamsadaptive-cards

How to fix rendering of Adaptive card in task module with specific width?


I'm rendering the adaptive card in teams with task module. Here the issue is I'm giving the column width as stretch, but when I see the JSON the width has changed to auto.

I tried to give width in pixels also; that also is not working. I'm returning this attachment to task module which will be shown in kind of Modal. Here I've given the column width as stretch, but the width is getting set to auto, which is causing an alignment issue. Do you have any solution?

C#:

Attachment attachment;
AdaptiveCard card = new AdaptiveCard("1.0");
var body = new List<AdaptiveElement>();
var mainContainer = new AdaptiveContainer();
var container2 = new AdaptiveContainer();
for (int j = 0; j < details.SelectedProjects.Count; j++) {
    var columnSetWbse = new AdaptiveColumnSet();
    var columnWbse = new AdaptiveColumn();
    columnWbse.Width = AdaptiveColumnWidth.Stretch;
    columnWbse.Spacing = AdaptiveSpacing.Default;
    if (j == 0) {
        AdaptiveTextBlock txtBlkWbseHeader = new AdaptiveTextBlock {
            Weight = AdaptiveTextWeight.Default,
            Text = Helper.Constants.WBSE,
            HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
            Wrap = true,
            Spacing = AdaptiveSpacing.Default,
        };
        columnWbse.Items.Add(txtBlkWbseHeader);
    }
    AdaptiveTextBlock txtBlkWbse = new AdaptiveTextBlock {
        Weight = AdaptiveTextWeight.Default,
        Text = details.SelectedProjects[j].Description,
        HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
        Wrap = true,
        Spacing = AdaptiveSpacing.Default,
    };
    columnWbse.Items.Add(txtBlkWbse);
    columnSetWbse.Columns.Add(columnWbse);

    //Loop for no. of days
    for (int i = 0; i < loop; i++) {
        var columnWbseinput = new AdaptiveColumn();
        columnWbseinput.Spacing = AdaptiveSpacing.Default;
        columnWbseinput.Width = AdaptiveColumnWidth.Stretch;
        if (j == 0) {
            AdaptiveTextBlock txtBlkDte = new AdaptiveTextBlock {
                Weight = AdaptiveTextWeight.Default,
                Text = details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") + " " + details.PeriodEnd.AddDays( - loop + i + 1).ToString("MM/dd", CultureInfo.GetCultureInfo("en-US")),
                HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
                Wrap = true,
                Size = AdaptiveTextSize.Default,
                Spacing = AdaptiveSpacing.Default,
            };
            columnWbseinput.Items.Add(txtBlkDte);
        }
        AdaptiveNumberInput wbseInput = new AdaptiveNumberInput() {
            Id = "txtHrs" + "-" + details.PeriodEnd.AddDays( - loop + i + 1).ToString("MM/dd/yyyy", CultureInfo.GetCultureInfo("en-US")) + "-" + details.SelectedProjects[j].Code,
            Min = 0,
            Max = 2,
            Value = (details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") == "Sat" || details.PeriodEnd.AddDays( - loop + i + 1).ToString("ddd") == "Sun") ? 0 : 8,
            Spacing = AdaptiveSpacing.Default,
        };
        columnWbseinput.Items.Add(wbseInput);
        columnSetWbse.Columns.Add(columnWbseinput);
    }
    container2.Items.Add(columnSetWbse);
}
mainContainer.Items.Add(container2);
body.Add(mainContainer);
card.Body = body;

card.Actions = new List<AdaptiveAction>() {
    new AdaptiveSubmitAction() {
        Data = details,
        Title = "Save and exit",
    }
};

attachment = new Attachment() {
    ContentType = AdaptiveCard.ContentType,
    Content = card
};
return attachment;

Solution

  • Its the issue of the column set, so i have used only 1 column set instead of creating in a loop & defining the width.