botframeworkcarouseldirect-line-botframeworkweb-chat

Carousel card size


I have some cards in carousel in a bot-framework chatbot. It shows texts and buttons. Some text are longer than the rest, so the card is not the same height. enter image description here

Is there a way to make them to be the same size?


Solution

  • You can almost do this. You can set a minimum height in pixels, but if you have Wrap turned on, sufficiently large blocks of text can still push past this minimum height. There is no way to set a maximum height (though you can kind of do this by removing Wrap on all your text elements so that you know they'll only take 1 line. Not very readable, though). To do this just add a minHeight element to the top level of the card definition, e.g.

    {
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.3",
      "minHeight": "400px",
      "type": "AdaptiveCard",
      "body": [
        // card content here
      ]
    }
    

    Note that you can test this out in Adaptive Card Designer to make a a little easier to see the impact of your changes and various sized text fields.