Search code examples
azurebotframeworkweb-chat

Is there a way to change web chat font size in IE11


I have created a chat bot on the directline channel for all browsers, including IE11.

I need to change the font size of the user and bot messages. I have found a way to do this for all browsers bar IE11 (due to ES5).

I have tried to find ways to do this; including looking for styleOptions in the defaultStyleOptions.js

https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

To which there are no options available.

There is an option, however, in the createSetStyle method of WebChat that allows the font size to be changed.

const styleSet = window.WebChat.createStyleSet({});

styleSet.textContent = {
    fontSize: '24px'
};

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({token: conversationToken}),
    styleSet
}, document.getElementById("chatbot-display"));

Though this option does not work in IE11 (ES5)

I expect to be able to find an option which allows me to change the font size of the chat message text. i.e. fontSize: 12px.


Solution

  • I was unable to find a method from WebChat to do this.

    However, I was able to find a work around.

    .bubble {
    font-size: 24px !important;
    }