langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-08-24 22:11:36 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

Remove the Scrollbar from the Center of the Screen #6011

New Issue
Closed
opened 2026-02-21 18:13:40 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 18:13:40 -05:00
Owner
Copy Link
Copy Source

Originally created by @taowang1993 on GitHub (Oct 10, 2024).

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
  • 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.

image

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

Originally created by @taowang1993 on GitHub (Oct 10, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [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. <img width="1452" alt="image" src="https://github.com/user-attachments/assets/dabd6cdd-488c-4a94-90c9-a8793423fd95"> ### ✔️ Expected Behavior _No response_ ### ❌ Actual Behavior _No response_
yindo closed this issue 2026-02-21 18:13:40 -05:00
yindo commented 2026-02-21 18:13:40 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Oct 10, 2024):

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.

@dosubot[bot] commented on GitHub (Oct 10, 2024): <!-- Answer --> 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: ```html <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: ```js 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 <sup>[[1]](https://github.com/langgenius/dify-docs/blob/main/en/learn-more/use-cases/how-to-integrate-dify-chatbot-to-your-wix-website.md)</sup><sup>[[2]](https://github.com/langgenius/dify/blob/main/web/public/embed.js)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6011
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?