Свойство Flex в CSS скрывает полосу прокрутки в WebChat.

Question

У меня есть виджет веб-чата, который я загружаю по URL-адресу, но мне нужно стилизовать виджет, чтобы в нижней части полосы прокрутки всегда отображались самые последние сообщения.Я нашел способ сделать это с помощью CSS, но он еще не совсем там.

Если я добавлю display: -webkit-flex;, я получу именно то, что мне нужно, но ширина окна чата таинственно сокращается по ширине.Я попытался добавить свойства ширины, но они игнорируются при запуске.

Тогда, если я использую display: -webkit-flex; и flex-direction:column-reverse, ширина остается полной шириной контейнера, в котором он находится, и фокус находится наснизу, как я хотел, но полоса прокрутки исчезает, поэтому пользователь не может просматривать прошлые сообщения.Я также попробовал некоторые методы javascript, но они, похоже, также игнорируются, когда я добавляю их в свой скрипт в моем файле .pug.

Как мне получить окно чата, чтобы прокручивать фокус внизу (чтобы видеть новые сообщения без прокрутки) и при этом иметь возможность снова вручную прокручивать вверх, чтобы увидеть старые сообщения?Я открыт для решения в CSS, HTML или JavaScript.Поскольку HTML легко получить в формате Pug, я включу его в качестве тега, даже если я использую Pug для своего пользовательского интерфейса.

index.pug

 chat-window
      #webchat(action='/chat', method='POST')
      script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
      script.
        const styleSet = window.WebChat.createStyleSet({
          bubbleBackground: 'rgba(252, 229, 53, 1)',
          bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
          paddingRegular: 10,
          sendBoxHeight: 50,   
        });
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxx' }),
        styleSet
        }, document.getElementById('webchat'));

main.css

chat-window {
    border-style: solid;
    border-width: 2px 2px 1px 1px;
    border-color: #000080;
    float: left;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 70%;
    background-color: #5a8cb1;
    height: 350px;
}

#webchat {
    max-height: 270px;
    margin-bottom: 20px;
    width: 100%;
    overflow: auto;
    display: -webkit-flex;
}

Answer 1

Не удивлен, что нет никаких ответов, так как сам виджет - это его собственный зверь, который, вероятно, влияет на любой CSS или Javascript, в комплекте со своим собственным стилем.Хотя некоторые CSS работали, стоит спросить.Было не так много вариантов стилизации с помощью виджета, но мне удалось найти обходной путь.Это визуально не так здорово, как я надеялся, но оно расширяет окно чата до большей ширины.Я понял, что причина его усечения при добавлении display: -webkit-flex; была в том, что он был «гибким» к тексту всплывающей подсказки чата.Поэтому, когда я введу более длинный текст, он расширится.Итак, я нашел несколько минимальных вариантов стилей для самого чата через виджет WebChat от Microsoft .Я увеличил ширину пузырька, поэтому он будет по крайней мере отображать окно чата большего размера при вводе более длинного текста:

Это хороший обходной путь, которыйбудет достаточно.Окно чата начинается более узко (до тех пор, пока не будет введен более длинный текст), но я могу с этим справиться.Но после того, как оно расширилось, оно остается широким, так что, по крайней мере, это хорошо.Кроме того, я не теряю полосу прокрутки, что очень важно.

Окончательный код:

main.css

#webchat {
    max-height: 270px;
    margin-bottom: 20px;
    width: 100%;
    overflow: auto;
    display: -webkit-flex;
    justify-content: center;
}

index.pug

chat-window
  #webchat(action='/chat', method='POST')
  script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
  script.
    const styleSet = window.WebChat.createStyleSet({
      bubbleBackground: 'rgba(252, 229, 53, 1)',
      bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
      paddingRegular: 10,
      sendBoxHeight: 50,  
      bubbleMinWidth: 400,
      bubbleMaxWidth: 700
    });
    window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }),
    styleSet
    }, document.getElementById('webchat'));