Separator not showing in Adaptive Cards

Question

I've been trying to get the "separator" property of Adaptive cards to work, but it does not seem to be rendering in the BotFramework Emulator.

Here are images to the Emulator and the Visualizer for the same code: Emulator Visualizer

The code in both places is the same, and is as follows:

{
    "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 separators appear only in the visualizer, for the same code. Am I missing something?

Duplicate of https://stackoverflow.com/questions/50270145/button-alignment-in-adaptive-cards — Nicolas R, May 14 '18 at 09:58
By the way: do not fully trust Adaptive Card's visualizer for Bot projects, it is often not exactly rendering the same content as in the real channels. You have to double check — Nicolas R, May 14 '18 at 09:59
I checked the other post, where the answer said we can create custom emulators. I want to be able to change the cards themselves. Not the emulator. Like is it possible to inject a HTML div inside it. Or modify the parser which converts the card JSON to HTML in some way, to be able to add extra HTML divs. For instance, since the separator does not seem to be working, an alternative to this would be to insert your own div, and add a separator manually. — Saurav Sircar, May 17 '18 at 12:29
"Or modify the parser which converts the card JSON to HTML in some way, to be able to add extra HTML divs" << this is channel customization, so emulator customization in your case — Nicolas R, May 17 '18 at 13:17
That's what I said on your duplicated question https://stackoverflow.com/questions/50270145/button-alignment-in-adaptive-cards — Nicolas R, May 18 '18 at 07:30
Possible duplicate of [Button alignment in Adaptive cards](https://stackoverflow.com/questions/50270145/button-alignment-in-adaptive-cards) — Nicolas R, May 18 '18 at 07:31

score 1 · Answer 1 · answered Oct 11 '18 at 13:08

1

Instead of separator you can use Separation = SeparationStyle.Strong this is working for me

answered Oct 11 '18 at 13:08

Nishant

11
1

score 0 · Answer 2 · answered Jan 17 '19 at 14:24

it might be a little bit tricky because the separator documentation is a little bit vague (at least for me).

Take a look here - the syntax purposed to separator doesn't seem to work anywhere.

What I did find:

The spacing property works just fine (at least with these values "none" | "small" | "default" | "medium" | "large" | "extraLarge" | "padding")
It will only works when using in containers (Container, ColumnSet, Column, etc.)
It is also apply (as the name implies) on the outer area of the container (similar to CSS margin property)
Will not work for the first container

You may go to the adaptive cards classic editor and put spacing (let's say "spacing": "large") on the second Container section (there are only 2 of them) and observe the spacing impact by yourself

Separator not showing in Adaptive Cards

2 Answers2