[Rendering] Fact set spacing setting from the host config does not work in the JS renderer

[lynamemi]

Target Platforms

NodeJS

SDK Version

1.3

Application Name

Viva Connections

Problem Description

The JS renderer is using a top margin on a table row to implement the spacing set in the host config json for fact set. Margin has no effect on table rows so there is no spacing between rows in a fact set.

Stack overflow for reference: https://stackoverflow.com/questions/1993277/css-table-layout-why-does-table-row-not-accept-a-margin

Should use this style instead on the table:

// 10px being the spacing 
border-collapse: separate;
border-spacing: 0 10px; 

Screenshots

Card JSON

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "TextBlock",
            "text": "United State Holidays",
            "wrap": true,
            "horizontalAlignment": "Center",
            "height": "stretch",
            "fontType": "Default",
            "size": "Medium"
        },
        {
            "type": "TextBlock",
            "text": "2021",
            "wrap": true,
            "weight": "Bolder",
            "size": "Medium",
            "color": "Accent"
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Use of 2 columns in ColumnSet",
                    "wrap": true,
                    "weight": "Bolder",
                    "color": "Accent"
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "January 1\n\nJanuary 18\n\nFebruary 15\n\nMay 31\n\nJuly 5\n\nSeptember 6\n\nNovember 25\n\nNovember 26\n\nDecember 23\n\nDecember 24\n\nDecember 31",
                                    "wrap": true,
                                    "spacing": "Small",
                                    "weight": "Bolder"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "New Year's Day\n\nMartin Luther King Day\n\nPresidents Day\n\nMemorial Day\n\nIndependence Day\n\nLabor Day\n\nThanksgiving Day\n\nDay after Thanksgiving\n\nChristmas Eve\n\nChristmas Day\n\nNew Year’s Day 2022",
                                    "wrap": true,
                                    "spacing": "Small"
                                }
                            ]
                        }
                    ]
                }
            ],
            "style": "emphasis",
            "spacing": "Medium"
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Use of FactSet within a container",
                    "wrap": true,
                    "weight": "Bolder",
                    "color": "Accent"
                },
                {
                    "type": "FactSet",
                    "facts": [
                        {
                            "title": "January 1",
                            "value": "New Year's Day"
                        },
                        {
                            "title": "January 18",
                            "value": "Martin Luther King Day"
                        },
                        {
                            "title": "February 15",
                            "value": "Presidents Day"
                        },
                        {
                            "title": "May 31",
                            "value": "Memorial Day"
                        },
                        {
                            "title": "July 5",
                            "value": "Independence Day"
                        },
                        {
                            "title": "September 6",
                            "value": "Labor Day"
                        },
                        {
                            "title": "November 25",
                            "value": "Thanksgiving Day"
                        },
                        {
                            "title": "November 26",
                            "value": "Day after Thanksgiving"
                        },
                        {
                            "title": "December 23",
                            "value": "Christmas Eve"
                        },
                        {
                            "title": "December 24",
                            "value": "Christmas Day"
                        },
                        {
                            "title": "December 31",
                            "value": "New Year’s Day 2022 (Observed)"
                        }
                    ],
                    "spacing": "Padding",
                    "height": "stretch"
                }
            ],
            "style": "emphasis",
            "spacing": "Medium"
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Submit time off",
            "style": "positive",
            "url": "http://"
        }
    ],
    "backgroundImage": {
        "horizontalAlignment": "Center"
    }
}

Sample Code Language

TypeScript

Sample Code

Host config json sample, note the spacing setting:

factSet: {
      title: {
        color: 'default',
        size: 'default',
        isSubtle: false,
        weight: 'bolder',
        wrap: true,
        maxWidth: 150
      },
      value: {
        color: 'default',
        size: 'default',
        isSubtle: false,
        weight: 'default',
        wrap: true
      },
      spacing: 10
    }

[paulcam206]

Addressing this issue is not currently on our roadmap, so closing. Please feel free to continue the conversation in this issue for future consideration.