QnA Maker customize response card when multiple answers is found

Question

The response card received when QnAMaker get multiple possible answers is too large and not appropriate.

Channel used: DirectLine

I've look into the botchat.css (https://cdn.botframework.com/botframework-webchat/latest/botchat.css) but could not find the class or id that can be modified to change the size of the card to a more appropriate one.

After some investigation, in google's dev mode, I've found the piece of code that's causing this behaviour:

element.style 
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    **flex: 0 1 100%;**
}

After changing, the flex to flex:0 1 0; in dev mod, the card seems to be alright. However i cannot see this reference anywhere in the botchat.css

Please advise how can I make the card more user friendly as it seems to be an issue by design on the DirectLine

If you check the html markup of the button(s), you will find the styles are defined in the [element's inline style attribute](https://i.stack.imgur.com/bhOK4.png), so you do not find it in `botchat.css` file. With the default style, the overflowed content will display an ellipsis, and the buttons in card display as expected on my side. — Fei Han, Sep 06 '18 at 05:40
`After changing, the flex to flex:0 1 0; in dev mod, the card seems to be alright.` If overriding the default styles can help solve the problem, you can write custom styles with `!important` declaration in your web page to override the default styles. — Fei Han, Sep 06 '18 at 05:45
Hello Fei Han, thank you for response. I also noticed that in edge the buttons in card display are as expected. In Chrome, its not good. Any idea how should i proceed with this. Tried the !important property but does not seems to work — Norwen, Sep 06 '18 at 06:17
I test it with my Chrome, the styles of buttons display well. If possible, you can try to upgrade your Chrome to the latest version to test it if work fine. — Fei Han, Sep 06 '18 at 06:24

0 Answers0