langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

Monaco Editor shows large white placeholder when scrolling long JSON output in workflow tracking tab Body #20235

New Issue
Closed
opened 2026-02-21 20:06:25 -05:00 by yindo · 3 comments
yindo commented 2026-02-21 20:06:25 -05:00
Owner
Copy Link
Copy Source

Originally created by @Exzzz5315 on GitHub (Nov 10, 2025).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • 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, otherwise it will be closed.
  • 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

1.10.0-rc1

Cloud or Self Hosted

Cloud

Steps to reproduce

  1. Create a new workflow application in the workspace
  • Go to the workspace and create a new application
  • Add a "Start (User Input)" node
  • Connect it to an LLM node
  • Connect the LLM node to an End node
  1. Configure the LLM node
  • In the LLM node's user input field, enter: "输出全国湖泊" (Output national lakes)
  1. Configure the End node
  • In the End node, select the output variable as: <LLM/{x}text String>
  1. Test the workflow
  • Click "Test Run" to execute the workflow
  • Navigate to the "Tracking" tab
  • Locate the output section under the End node
  1. Reproduce the scrolling bug
  • A scrollbar will appear on the right side of the output text editor
  • Drag the scrollbar down to scroll through the content
  • Observe that a large white placeholder/blank area appears instead of the actual text content

✔️ Expected Behavior

The text content should be displayed properly and completely within the Monaco Editor component. When scrolling through long JSON output, the Editor component's sticky DOM container should calculate its height correctly, allowing smooth scrolling without any white placeholder areas. The entire text content should remain visible and readable throughout the scrolling process.

❌ Actual Behavior

When scrolling down, a large white placeholder area appears, covering the actual text content and making it unreadable.
Example Output
{ "text": "中国拥有众多湖泊，分布广泛，类型多样，包括淡水湖、咸水湖、高原湖、构造湖、冰川湖等。以下是中国主要的湖泊列表（按面积从大到小排序），涵盖全国范围内具有代表性的大型湖泊：\n\n---\n\n### 🌊 中国主要湖泊（按面积排名）\n\n| 排名 | 湖泊名称 | 所在省份 | 面积（平方公里） | 类型 | 备注 |\n|------|----------------|------------------|------------------|----------------|------|\n| 1 | 鄱阳湖 | 江西省 | 约3,500 | 淡水湖 | 中国第一大淡水湖，长江中游重要调蓄湖 |\n| 2 | 洞庭湖 | 湖南省 | 约2,691 | 淡水湖 | 长江中游第二大湖泊，有"八百里洞庭"之称 |\n...[truncated due to length]..." }

Originally created by @Exzzz5315 on GitHub (Nov 10, 2025). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [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, otherwise it will be closed. - [x] 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：） - [x] Please do not modify this template :) and fill in all the required fields. ### Dify version 1.10.0-rc1 ### Cloud or Self Hosted Cloud ### Steps to reproduce 1. Create a new workflow application in the workspace - Go to the workspace and create a new application - Add a "Start (User Input)" node - Connect it to an LLM node - Connect the LLM node to an End node 2. Configure the LLM node - In the LLM node's user input field, enter: "输出全国湖泊" (Output national lakes) 3. Configure the End node - In the End node, select the output variable as: <LLM/{x}text String> 4. Test the workflow - Click "Test Run" to execute the workflow - Navigate to the "Tracking" tab - Locate the output section under the End node 5. Reproduce the scrolling bug - A scrollbar will appear on the right side of the output text editor - Drag the scrollbar down to scroll through the content - Observe that a large white placeholder/blank area appears instead of the actual text content ### ✔️ Expected Behavior The text content should be displayed properly and completely within the Monaco Editor component. When scrolling through long JSON output, the Editor component's sticky DOM container should calculate its height correctly, allowing smooth scrolling without any white placeholder areas. The entire text content should remain visible and readable throughout the scrolling process. ### ❌ Actual Behavior When scrolling down, a large white placeholder area appears, covering the actual text content and making it unreadable. Example Output `{ "text": "中国拥有众多湖泊，分布广泛，类型多样，包括淡水湖、咸水湖、高原湖、构造湖、冰川湖等。以下是中国主要的湖泊列表（按面积从大到小排序），涵盖全国范围内具有代表性的大型湖泊：\n\n---\n\n### 🌊 中国主要湖泊（按面积排名）\n\n| 排名 | 湖泊名称 | 所在省份 | 面积（平方公里） | 类型 | 备注 |\n|------|----------------|------------------|------------------|----------------|------|\n| 1 | 鄱阳湖 | 江西省 | 约3,500 | 淡水湖 | 中国第一大淡水湖，长江中游重要调蓄湖 |\n| 2 | 洞庭湖 | 湖南省 | 约2,691 | 淡水湖 | 长江中游第二大湖泊，有"八百里洞庭"之称 |\n...[truncated due to length]..." }`
yindo added the 🐞 bug label 2026-02-21 20:06:25 -05:00
yindo closed this issue 2026-02-21 20:06:25 -05:00
yindo commented 2026-02-21 20:06:25 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Nov 10, 2025):

Hi @Exzzz5315! I'm Dosu and I’m helping the dify team.

This bug with Monaco Editor showing a large white placeholder when scrolling long JSON output in the workflow tracking tab is confirmed, and there are no documented fixes or official workarounds yet in Dify 1.10.0-rc1. The issue likely relates to how the editor's container height or virtualization is calculated when rendering large content, possibly due to CSS constraints or the way the parent panel resizes and manages overflow. Similar UI bugs in Dify have been caused by fixed height limits or improper overflow settings in containers, which were resolved by switching to dynamic height and enabling overflow: auto for scrollable areas.

Recent changes in the codebase involved downgrading @monaco-editor/loader to v1.5.0 to fix event propagation issues, but this did not specifically address the white placeholder bug during scrolling of long outputs PR #27282. If you need a temporary workaround, you can try inspecting and adjusting the CSS for the editor container (removing fixed heights, ensuring height: 100%, and setting overflow: auto), or check if virtualization settings in Monaco are causing the blank area. There is no confirmed patch yet, but these steps have helped with similar rendering issues in other workflow panels.

If you need more technical details or want to experiment, look for the editor container styles and how the workflow tracking tab manages resizing and overflow. If you find a reliable workaround, sharing it in the repo may help others facing the same issue.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

@dosubot[bot] commented on GitHub (Nov 10, 2025): <!-- Greeting --> Hi @Exzzz5315! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the dify team. <!-- Answer --> This bug with Monaco Editor showing a large white placeholder when scrolling long JSON output in the workflow tracking tab is confirmed, and there are no documented fixes or official workarounds yet in Dify 1.10.0-rc1. The issue likely relates to how the editor's container height or virtualization is calculated when rendering large content, possibly due to CSS constraints or the way the parent panel resizes and manages overflow. Similar UI bugs in Dify have been caused by fixed height limits or improper overflow settings in containers, which were resolved by switching to dynamic height and enabling `overflow: auto` for scrollable areas. Recent changes in the codebase involved downgrading `@monaco-editor/loader` to v1.5.0 to fix event propagation issues, but this did not specifically address the white placeholder bug during scrolling of long outputs [PR #27282](https://github.com/langgenius/dify/pull/27282). If you need a temporary workaround, you can try inspecting and adjusting the CSS for the editor container (removing fixed heights, ensuring `height: 100%`, and setting `overflow: auto`), or check if virtualization settings in Monaco are causing the blank area. There is no confirmed patch yet, but these steps have helped with similar rendering issues in other workflow panels. If you need more technical details or want to experiment, look for the editor container styles and how the workflow tracking tab manages resizing and overflow. If you find a reliable workaround, sharing it in the repo may help others facing the same issue. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/5b32a466-6fa2-4d52-bfdb-950ced17f55a?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/6088a4f4-073a-43f3-b3d4-4f06fb0c05a0/ask?utm_source=github)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/langgenius/dify/issues/28048)
yindo commented 2026-02-21 20:06:25 -05:00
Author
Owner
Copy Link
Copy Source

@Exzzz5315 commented on GitHub (Nov 12, 2025):

配置项中添加以下配置关闭吸顶即可
stickyScroll: { enabled: false, },

@Exzzz5315 commented on GitHub (Nov 12, 2025): 配置项中添加以下配置关闭吸顶即可 `stickyScroll: { enabled: false, },`
yindo commented 2026-02-21 20:06:25 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Dec 13, 2025):

Hi, @Exzzz5315. I'm Dosu, and I'm helping the Dify team manage their backlog and am marking this issue as stale.

Issue Summary:

  • You reported a bug in version 1.10.0-rc1 where the Monaco Editor in the workflow tracking tab shows a large white placeholder instead of text when scrolling through long JSON output.
  • The issue likely relates to container height miscalculations or CSS overflow settings.
  • A suggested workaround involves inspecting/removing fixed heights and enabling overflow: auto.
  • You found that disabling sticky scrolling via stickyScroll.enabled: false also helps mitigate the problem.
  • No official fix has been released yet.

Next Steps:

  • Please let me know if this issue is still relevant with the latest version of Dify by commenting here to keep the discussion open.
  • Otherwise, this issue will be automatically closed in 15 days.

Thank you for your understanding and contribution!

@dosubot[bot] commented on GitHub (Dec 13, 2025): Hi, @Exzzz5315. I'm [Dosu](https://dosu.dev), and I'm helping the Dify team manage their backlog and am marking this issue as stale. **Issue Summary:** - You reported a bug in version 1.10.0-rc1 where the Monaco Editor in the workflow tracking tab shows a large white placeholder instead of text when scrolling through long JSON output. - The issue likely relates to container height miscalculations or CSS overflow settings. - A suggested workaround involves inspecting/removing fixed heights and enabling `overflow: auto`. - You found that disabling sticky scrolling via `stickyScroll.enabled: false` also helps mitigate the problem. - No official fix has been released yet. **Next Steps:** - Please let me know if this issue is still relevant with the latest version of Dify by commenting here to keep the discussion open. - Otherwise, this issue will be automatically closed in 15 days. Thank you for your understanding and contribution!
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 🐞 bug
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#20235
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?