microsoft / microsoft/BotFramework-WebChat

Text overflowing instead of wrapping in Adaptive Cards in Webchat

Open
#4,051 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bot Services bug customer-reported
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

Describe the bug

Text is overflowing instead of wrapping in Adaptive Cards when in an unordered list.

Steps to reproduce

  1. Create a simple bot and have it send an adaptive card activity that sends the following card payload
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "This is the heading",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "text": "* This is a test to show how the text is overflowing the container and wrapping is failing it should be in an unordered list.",
                    "wrap": true
                }
            ]
        }
    ]
}

Expected behavior

The contents should not overflow the container ideally

Screenshots

Problem
Overflow

How it should appear
no overflow

Additional context

We have been able to workaround it by including the following CSS in our stylesheet but we are concerned this may break in the future or not always work.

ul { width: auto !important; }?

Version

botframework-webchat:ui:version" content="4.14.1

[Bug]

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the Adaptive Card payload in BotFramework-WebChat 4.14.1, then inspect how the unordered list is rendered in the chat UI. No source file or test is named, so trace the list styling from the reproduction and verify that long text wraps without relying on the reported global CSS workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.