Add lists (<ul> elements) to defaultStyleOptions
See original GitHub issueFeature Request
We have a chatbot that displays some Adaptive Cards which uses bullets inside them; they look like this using the card designer:
where the json of the card is:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Card Title",
"size": "Large",
"weight": "Bolder",
"id": "Title"
},
{
"type": "TextBlock",
"text": "- This is the first element\n- This is the second element",
"size": "default",
"wrap": true,
"id": "Body"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
And in several channels they look pretty similar.
However, when using WebChat, the resulting html produced by the channel translates the bullets to <ul>
elements with a fixed style that includes a left padding but no right one. As a result of that, part of the text of the elements of the list are hidded behind the card margin.
What we’ve done
To fix that, we are editing our CSS even if we know it’s not a recomended practice as it’s referencing a class name.
div.ac-textBlock>ul>li {
padding-right: 40px;
}
Explanation: this is adding a right padding to the <li>
elements inside <ul>
elements that are inside block text in adaptive cards.
Suggestion
I think it could be a good idea to make the <ul>
elements have their own params in defaultStyleOptions, so they can have an editable style and therefore avoid this situation.
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (5 by maintainers)
Top GitHub Comments
Hello. As stated earlier in the thread, we have no known means to support this scenario. Closing.
It looks like @bpz is using markdown to create the unordered lists, so I think it would have to be a customization to the Markdown-it renderer used by both Web Chat and Adaptive Cards. I don’t see a great way to do this through style options.