Markdown table too wide, scrollbar disappears, data in the latter half not displayed. #15560

suntao2015005848 · 2025-03-12T03:38:53Z

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

1.0.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

The Markdown table is too wide, causing the scrollbar to disappear and resulting in the data in the latter half not being displayed.
llm output data :

"下面是2025年1月山东地区的电价详情：\n\n| 电压等级 | 代理购电价格（元） | 容量补偿电价（元） | 上网线损费用（元） | 系统运行费用（元） | 政府性基金及附加（元） | 输配电价（元） | 需量电价（元） | 容量电价（元） | 尖峰时段电价（元） | 高峰时段电价（元） | 平时段电价（元） | 低谷时段电价（元） | 深谷时段电价（元） |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| 不满1千伏 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.2219 | - | - | 1.2669 | 1.1139 | 0.7568 | 0.3998 | 0.2977 |\n| 1-10千伏 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.2069 | - | - | 1.2519 | 1.0989 | 0.7418 | 0.3848 | 0.2827 |\n| 35千伏及以上 | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1919 | - | - | 1.2369 | 1.0839 | 0.7268 | 0.3698 | 0.2677 |\n| 1-10千伏 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1491 | 38.4 | 24.0 | 1.1941 | 1.0411 | 0.684 | 0.327 | 0.2249 |\n| 35-110千伏以下 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1341 | 35.2 | 22.0 | 1.1791 | 1.0261 | 0.669 | 0.312 | 0.2099 |\n| 110-220千伏以下 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1191 | 35.2 | 22.0 | 1.1641 | 1.0111 | 0.654 | 0.297 | 0.1949 |\n| 220千伏及以上 (两部制) | 0.4003 | 0.0705 | 0.0122 | 0.0057 | 0.0272 | 0.1041 | 32.0 | 20.0 | 1.1491 | 0.9961 | 0.639 | 0.282 | 0.1799 |\n\n以上信息为不同电压等级和工商业类型的电价详情。如需了解更详细的信息，请告知具体的电压等级和工商业类型。"

✔️ Expected Behavior

❌ Actual Behavior

dosubot · 2025-03-12T03:40:18Z

To address the issue of a Markdown table being too wide and causing the scrollbar to disappear in your self-hosted Dify version 1.0.1 environment, you can modify the CSS for the table to ensure it is scrollable. Update the overflow property in the CSS for tables from hidden to auto. Here is the modified CSS you should use:

.markdown-body table {
  border-spacing: 0;
  border-collapse: separate;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto; /* Change this line */
  border: 1px solid var(--color-divider-regular);
  border-radius: 8px;
}

This change will allow a scrollbar to appear when the table exceeds the width of its container, enabling users to scroll and view the entire content of the table ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

omjasoliya · 2025-03-12T04:53:36Z

.markdown-body table {
border-spacing: 0;
border-collapse: separate;
display: block;
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--color-divider-regular);
border-radius: 8px;
}
@dosu

suntao2015005848 · 2025-03-12T06:33:22Z

为了解决您自托管的 Dify 1.0.1 版本环境中 Markdown 表格过宽导致滚动条消失的问题，您可以修改表格的 CSS 以确保其可滚动。将overflow表格 CSS 中的属性从hidden更新为auto。以下是您应该使用的修改后的 CSS：

.markdown-body table {
border-spacing: 0;
border-collapse: separate;
display: block;
width: max-content;
max-width: 100%;
overflow: auto; /* Change this line */
border: 1px solid var(--color-divider-regular);
border-radius: 8px;
}
当表格超出其容器的宽度时，此更改将允许出现滚动条，从而使用户能够滚动并查看表格的全部内容[1]。

要继续与Dosu交谈，请提及@dosu。

帮助 Dosu 学习！提供反馈：很好的回应|不相关的答案|不正确的来源|太冗长|幻觉|错误报告|其他

Do I need to rebuild the image after making the changes?

dosubot · 2025-03-12T06:34:42Z

The CSS you've provided is correct for making a Markdown table scrollable horizontally. This will ensure that when the table content exceeds the container's width, a horizontal scrollbar will appear, allowing users to view the entire table content. This approach maintains the table's border and border-radius formatting ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

suntao2015005848 · 2025-03-12T06:41:53Z

@omjasoliya @crazywoola
Do I need to rebuild the image if I modify the markdown.scss?

omjasoliya · 2025-03-12T06:49:21Z

No, you don’t need to rebuild the image. Simply modifying markdown.scss and restarting the frontend service should apply the changes. You can try clearing the browser cache or refreshing the page if the changes don’t appear immediately If you want step by step guidance then feel free to ask :) @dosu

…

On Wed, 12 Mar 2025 at 12:12, suntao2015005848 ***@***.***> wrote: @omjasoliya <https://github.com/omjasoliya> @crazywoola <https://github.com/crazywoola> Do I need to rebuild the image if I modify the markdown.scss? — Reply to this email directly, view it on GitHub <#15560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZV7535G4VKCIWD4VWA2G3D2T7JMNAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWG4YDIMBUHE> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: suntao2015005848]*suntao2015005848* left a comment (langgenius/dify#15560) <#15560 (comment)> @omjasoliya <https://github.com/omjasoliya> @crazywoola <https://github.com/crazywoola> Do I need to rebuild the image if I modify the markdown.scss? — Reply to this email directly, view it on GitHub <#15560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZV7535G4VKCIWD4VWA2G3D2T7JMNAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWG4YDIMBUHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

dosubot · 2025-03-12T07:40:53Z

No, you don't need to rebuild the Docker image after modifying markdown.scss. You should modify the markdown.scss file, restart the frontend service, and clear your browser cache or refresh the page if the changes don't appear immediately ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

suntao2015005848 · 2025-03-12T07:56:52Z

I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu

dosubot · 2025-03-12T07:58:47Z

After updating markdown.scss, you need to restart the frontend service, not just docker-web-1. Additionally, clear your browser cache or refresh the page to ensure the changes take effect ^[1].

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

omjasoliya · 2025-03-12T07:58:57Z

may be there is restarting problem have you tried this command? docker compose restart frontend

…

On Wed, 12 Mar 2025 at 13:27, suntao2015005848 ***@***.***> wrote: I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu <https://github.com/dosu> — Reply to this email directly, view it on GitHub <#15560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZV7533XQZZDTH4NLFSD3CT2T7SFVAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DKOBXGA> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: suntao2015005848]*suntao2015005848* left a comment (langgenius/dify#15560) <#15560 (comment)> I updated the markdown.scss and restarted the docker-web-1, but the format of the markdown table did not take effect. @dosu <https://github.com/dosu> — Reply to this email directly, view it on GitHub <#15560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZV7533XQZZDTH4NLFSD3CT2T7SFVAVCNFSM6AAAAABY2PUYBGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMJWHE3DKOBXGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

crazywoola · 2025-03-12T08:01:00Z

Well, you need to rebuild the frontend image @suntao2015005848

dosubot · 2025-03-12T08:01:33Z

Try using the command docker compose restart frontend to ensure the frontend service is properly restarted. Additionally, clear your browser cache or refresh the page to see if the changes take effect. If the issue persists, double-check that the changes in markdown.scss are saved correctly and that there are no syntax errors.

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

suntao2015005848 · 2025-03-12T08:37:20Z

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

cyh-97 · 2025-03-12T08:46:11Z

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以，
cd web && docker build . -t dify-web

然后修改docker-compose.yml 文件中的web镜像版本

omjasoliya · 2025-03-12T08:47:06Z

Possible Reasons & Fixes:
1️⃣ Service Name Mismatch
🔹 The service name might be different in the docker-compose.yml file.
🔹 Run the following command to check all available services:

docker compose ps
Look for the correct service name and replace frontend in your restart command.

2️⃣ Missing or Incorrect docker-compose.yml
🔹 Ensure you're in the correct directory where docker-compose.yml is located.
🔹 Try running:

ls docker-compose.yml

If it doesn’t exist, navigate to the correct directory.

3️⃣ Docker Compose Version Issue
🔹 If using older Docker versions, try:

docker-compose restart frontend
(Use a hyphen docker-compose instead of a space docker compose)

4️⃣ Containers Are Not Running

docker compose up -d
This ensures all services are started.

suntao2015005848 · 2025-03-12T09:05:05Z

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web

然后修改docker-compose.yml 文件中的web镜像版本

1、更改 markdown.scss

2、修改 docker-compose.yml

web:
#    image: langgenius/dify-web:1.0.1
    build: ../web
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: `${LOOP_NODE_MAX_COUNT:-100}```

3、执行: docker compose up -d

cyh-97 · 2025-03-12T09:08:53Z

Well, you need to rebuild the frontend image @suntao2015005848

thanks , After rebuilding, it was successful.Executing docker compose restart frontend resulted in an error: no such service: frontend.

请问一下你是怎么重建的呀，我重建web镜像之后启动还是不可以， cd web && docker build . -t dify-web
然后修改docker-compose.yml 文件中的web镜像版本

1、更改 markdown.scss

2、修改 docker-compose.yml
web:
#    image: langgenius/dify-web:1.0.1
    build: ../web
    restart: always
    environment:
      CONSOLE_API_URL: ${CONSOLE_API_URL:-}
      APP_API_URL: ${APP_API_URL:-}
      SENTRY_DSN: ${WEB_SENTRY_DSN:-}
      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-0}
      TEXT_GENERATION_TIMEOUT_MS: ${TEXT_GENERATION_TIMEOUT_MS:-60000}
      CSP_WHITELIST: ${CSP_WHITELIST:-}
      MARKETPLACE_API_URL: ${MARKETPLACE_API_URL:-https://marketplace.dify.ai}
      MARKETPLACE_URL: ${MARKETPLACE_URL:-https://marketplace.dify.ai}
      TOP_K_MAX_VALUE: ${TOP_K_MAX_VALUE:-}
      INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH: ${INDEXING_MAX_SEGMENTATION_TOKENS_LENGTH:-}
      PM2_INSTANCES: ${PM2_INSTANCES:-2}
      LOOP_NODE_MAX_COUNT: `${LOOP_NODE_MAX_COUNT:-100}```

3、执行: docker compose up -d

可以了，谢谢你 👍

omjasoliya · 2025-03-12T09:08:58Z

Yes! Based on the steps you've taken, you should now execute:

docker compose up -d --build

Explanation:

docker compose up -d → Runs containers in detached mode (in the background).
--build → Ensures Docker rebuilds the image to apply the changes you made in markdown.scss and docker-compose.yml.
Additional Steps:

If you previously had containers running, you may want to stop them first:

docker compose down

Then, rebuild and restart:

docker compose up -d --build

Now, your changes should take effect. Let me know if you run into issues!

infinitnet · 2025-03-12T12:47:59Z

Same issue here but web rebuild fails with the below error. Hopefully this will be fixed in v1.0.2 next week.

188.7  ELIFECYCLE  Command failed.
------
failed to solve: process "/bin/sh -c pnpm build" did not complete successfully: exit code: 1

dosubot bot added the 🐞 bug Something isn't working label Mar 12, 2025

crazywoola added the good first issue Good first issue for newcomers label Mar 12, 2025

fdb02983rhy linked a pull request Mar 12, 2025 that will close this issue

fix: improve markdown code block horizontal scrolling #15658

Open

5 tasks

crazywoola mentioned this issue Mar 13, 2025

Bug in version 1.0.1: Table content exceeding width no longer has a scrollbar #15682

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Markdown table too wide, scrollbar disappears, data in the latter half not displayed. #15560

Markdown table too wide, scrollbar disappears, data in the latter half not displayed. #15560

suntao2015005848 commented Mar 12, 2025

dosubot bot commented Mar 12, 2025

omjasoliya commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025

omjasoliya commented Mar 12, 2025 via email •

edited

Loading

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 •

edited

Loading

dosubot bot commented Mar 12, 2025

omjasoliya commented Mar 12, 2025 via email

crazywoola commented Mar 12, 2025

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 •

edited

Loading

cyh-97 commented Mar 12, 2025 •

edited

Loading

omjasoliya commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 •

edited

Loading

cyh-97 commented Mar 12, 2025

omjasoliya commented Mar 12, 2025

infinitnet commented Mar 12, 2025

Markdown table too wide, scrollbar disappears, data in the latter half not displayed. #15560

Markdown table too wide, scrollbar disappears, data in the latter half not displayed. #15560

Comments

suntao2015005848 commented Mar 12, 2025

Self Checks

Dify version

Cloud or Self Hosted

Steps to reproduce

✔️ Expected Behavior

❌ Actual Behavior

dosubot bot commented Mar 12, 2025

omjasoliya commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025

omjasoliya commented Mar 12, 2025 via email • edited Loading

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 • edited Loading

dosubot bot commented Mar 12, 2025

omjasoliya commented Mar 12, 2025 via email

crazywoola commented Mar 12, 2025

dosubot bot commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 • edited Loading

cyh-97 commented Mar 12, 2025 • edited Loading

omjasoliya commented Mar 12, 2025

suntao2015005848 commented Mar 12, 2025 • edited Loading

cyh-97 commented Mar 12, 2025

omjasoliya commented Mar 12, 2025

infinitnet commented Mar 12, 2025

omjasoliya commented Mar 12, 2025 via email •

edited

Loading

suntao2015005848 commented Mar 12, 2025 •

edited

Loading

suntao2015005848 commented Mar 12, 2025 •

edited

Loading

cyh-97 commented Mar 12, 2025 •

edited

Loading

suntao2015005848 commented Mar 12, 2025 •

edited

Loading