Remove the Scrollbar from the Center of the Screen

[taowang1993]

Self Checks

• [X] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.9.1

Cloud or Self Hosted

Cloud, Self Hosted (Docker)

Steps to reproduce

I want to embed Dify chatbot on my website.

But a scrollbar shows up in the middle of the screen.

This doesn't look very nice.

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot[bot]]

To remove the scrollbar from the center of the screen when embedding the Dify chatbot using an HTML <iframe>, you can modify the style attribute of the <iframe> to include overflow: hidden;. Here's an example:

<iframe src="your-chatbot-url" style="width: 100%; height: 100%; min-height: 700px; overflow: hidden;" frameborder="0" allow="microphone"></iframe>

Additionally, ensure that the JavaScript configuration for the chatbot sets the overflow property to hidden within the createIframe function:

iframe.style.cssText = `
  border: none; position: absolute; flex-direction: column; justify-content: space-between;
  box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
  bottom: 55px; right: 0; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
  max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647;
  overflow: hidden; left: unset; background-color: #F3F4F6; user-select: none;
`;

This should help in hiding the scrollbars both in the HTML and JavaScript configurations ^[1][2].

To continue talking to Dosu, mention @dosu.