Botframework-webchat: Isn't Adaptive Card's AdaptiveContainer's Spacing = padding should add padding to the container?

[arman-g]

I am trying to add a padding to an AdaptiveCard AdaptiveContainer so I set its Spacing = "Padding". This seems to have no effect, so my question is:
isn't setting the Spacing = "padding" should add padding to the container?

[v-kydela]

Hi @arman-g

Perhaps you could help clear up some confusion. Your title says Space = padding but then your question says Spacing = "Padding" and Spacing = "padding". These inconsistencies make me worry that maybe you're not setting the property correctly. Can you show us what your code actually looks like?

[arman-g]

Hi @v-kydela sorry for the confusion. I corrected the title and it is spacing. Below I provide C# code of adaptive card where I set the "Spacing" property to "Padding" for a container and column set. They have no effect on webchat.

Body.Add(new AdaptiveContainer
{
    Spacing = AdaptiveSpacing.Padding,
    Items = new List<AdaptiveElement>
    {
        new AdaptiveColumnSet
        {
            Spacing = AdaptiveSpacing.Padding,
            SelectAction = SelectAction = new AdaptiveToggleVisibilityAction
            {
                TargetElements = new List<AdaptiveTargetElement>
                {
                    new AdaptiveTargetElement
                    {
                        ElementId = "malfeasance_explained",
                        IsVisible = true
                    },
                    new AdaptiveTargetElement
                    {
                        ElementId = "show_info_icon",
                        IsVisible = false
                    }
                }
            },
            Columns = new List<AdaptiveColumn>
            {
                new AdaptiveColumn
                {
                    Width = "stretch",
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveTextBlock
                        {
                            Text = messages[1126],
                            Wrap = true
                        }
                    }
                },
                new AdaptiveColumn
                {
                    Id = "show_info_icon",
                    VerticalContentAlignment = AdaptiveVerticalContentAlignment.Center,
                    Width = "16px",
                    Items = new List<AdaptiveElement>
                    {
                        new AdaptiveImage
                        {
                            Spacing = AdaptiveSpacing.Padding,
                            HorizontalAlignment = AdaptiveHorizontalAlignment.Center,
                            UrlString = _httpContext.GetAbsoluteUrl("info.png"),
                            PixelWidth = 16,
                            PixelHeight = 16
                        }
                    }
                }
            }
        },
        malfeasanceExplained
    }
});

[v-kydela]

@arman-g - Thank you for the clarification

Web Chat uses the out-of-the-box HTML renderer from the Adaptive Cards Node.js SDK, so this issue might have been better suited for the Adaptive Cards repo. From my examination of the source code, there doesn't seem to be anything special about the "padding" value that makes the spacing behave differently. It looks like the default host config makes "padding" have the same spacing as "default."

You might consider trying different values for spacing. If you want to easily see how an Adaptive Card will look without having to send the card to Web Chat, you can try the Adaptive Cards Designer or you can play with the example HTML from the SDK.

Does this resolve your issue?

[arman-g]

@v-kydela,

Using Adaptive Cards Designer and changing container spacing has no effect. I guess this is a question to AdaptiveCards team.
Thank you for your response and help.