Adaptive card container create empty div blocks

[Gooyou69]

Hello,

I'm user adaptive card via React framework. I have an array of complex objects (customer.attributes). I want to filter the array's items and display the items that respect a condition ("isVisible": "${attributeCode == ##CC3##}"). This works fine, the adaptive card display only the items I want.

However, all the items that don't respect the condition create a empty div. These divs create blank spaces. How can I get rid of them ?

For information, I also tried to use the $when attribute with the same result

I tried to hard code "isVisible": false in the template. The empty divs are still here but have a "display: none" properties in their css. Therefore, they're not visible, and that's perfect. Why isn't it working with the condition ?

Template :

{

"type": "AdaptiveCard",

"body": [

  {

    "type": "TextBlock",

    "text": "${customer.firstName} ${customer.lastName}",

    "size": "Large"

  },

  {

    "type": "Container",

    "$data": "${customer.attributes}",

    "spacing": "medium",

    "items": [

      {

        "type": "TextBlock",

        "isSubtle": "true",

        "text": "${attributeLabel}",

        "isVisible": "${attributeCode == ##CC3##}"

      },

      {

        "type": "TextBlock",

        "isVisible": "${attributeCode == ##CC3##}",

        "text": "${attributeValue.textValue}",

        "weight": "Bolder"

      }

    ]

  }

],

"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

"version": "1.0"

}

Data:

{

"customer": {

"customerId": "id",

"firstName": "David",

"attributes": [

  {

    "attributeCode": "CC1",

    "attributeType": "TEXT",

    "attributeLabel": "Texte libre 1",

    "attributeValue": "test1"

  },

  {

    "attributeCode": "CC3",

    "attributeType": "TEXT",

    "attributeLabel": "Texte libre 3",

    "attributeValue": "test3"

  }

],

"loyaltyEligible": true,

"loyaltyAccounts": []

}

}

Result div :