question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add lists (<ul> elements) to defaultStyleOptions

See original GitHub issue

Feature Request

We have a chatbot that displays some Adaptive Cards which uses bullets inside them; they look like this using the card designer:

image

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.

image

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:closed
  • Created 4 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
cwhittencommented, Feb 25, 2021

Hello. As stated earlier in the thread, we have no known means to support this scenario. Closing.

1reaction
tdurnfordcommented, Nov 8, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styling lists - Learn web development | MDN
Lists are relatively easy to get the hang of styling once you know a few ... The <ul> and <ol> elements have a...
Read more >
CSS Styling Lists - W3Schools
HTML Lists and CSS List Properties. In HTML, there are two main types of lists: unordered lists (<ul>) - the list items are...
Read more >
Web Chat customization in the Bot Framework SDK - Bot Service
The Web Chat control provides rich customization options: you can change colors, sizes, placement of elements, add custom elements, and interact ...
Read more >
Ajax error: command":"settings","settings": in textbox ... - Drupal
I'm reporting this bug to start a conversation, but I don't know what specific combination of modules or settings is triggering this error....
Read more >
Import Word documents into a project
Word Style Use the drop-down list to specify the style in the Word ... to add topics generated from Word documents to a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found