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

The dropdown options become invalid in mobile mode after the workflow is published. #15258

New Issue
Closed
opened 2026-02-21 19:20:55 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 19:20:55 -05:00
Owner
Copy Link
Copy Source

Originally created by @tedawan on GitHub (Jul 10, 2025).

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.6.0

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

In the workflow application, when using dropdown fields in a form and switching to mobile view size, clicking on the dropdown box does not display the options.

Image

✔️ Expected Behavior

it is normal

❌ Actual Behavior

No response

Originally created by @tedawan on GitHub (Jul 10, 2025). ### 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 1.6.0 ### Cloud or Self Hosted Self Hosted (Source) ### Steps to reproduce In the workflow application, when using dropdown fields in a form and switching to mobile view size, clicking on the dropdown box does not display the options. <img width="511" height="907" alt="Image" src="https://github.com/user-attachments/assets/42947ceb-eaa2-41d2-a201-a85fc1155493" /> ### ✔️ Expected Behavior it is normal ### ❌ Actual Behavior _No response_
yindo added the 🐞 buggood first issue🌊 feat:workflow labels 2026-02-21 19:20:55 -05:00
yindo closed this issue 2026-02-21 19:20:55 -05:00
yindo commented 2026-02-21 19:20:55 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Jul 11, 2025):

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

This issue is likely caused by how dropdowns are rendered and positioned in mobile mode. Dify's dropdowns use a custom portal component (PortalToFollowElem) to render options, and recent changes in related components (like WorkplaceSelector) fixed similar mobile issues by adjusting z-index, positioning, and CSS classes for overlays and dropdowns [source].

In your case, the dropdown options may not appear because the overlay is either being clipped, rendered behind other elements, or not triggered correctly on mobile. This can happen due to restrictive CSS (like overflow or z-index), or event handling differences between desktop and mobile [source].

To test a workaround, try increasing the z-index of the dropdown overlay and ensure no parent container has overflow: hidden or similar restrictions in mobile view. You can also compare your workflow dropdown's implementation and styles to the WorkplaceSelector component, which uses z-[1000] and specific mobile CSS tweaks to ensure visibility [source].

If you have custom styles or layout wrappers in your workflow forms, check for any that might interfere with overlays in mobile mode. If the issue persists, inspecting the DOM in mobile view and checking for hidden or mispositioned dropdown elements can help pinpoint the cause.

To reply, just mention @dosu.

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

@dosubot[bot] commented on GitHub (Jul 11, 2025): <!-- Greeting --> Hi @tedawan! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the dify team. <!-- Answer --> This issue is likely caused by how dropdowns are rendered and positioned in mobile mode. Dify's dropdowns use a custom portal component (`PortalToFollowElem`) to render options, and recent changes in related components (like `WorkplaceSelector`) fixed similar mobile issues by adjusting z-index, positioning, and CSS classes for overlays and dropdowns [[source]](https://github.com/langgenius/dify/pull/21115). In your case, the dropdown options may not appear because the overlay is either being clipped, rendered behind other elements, or not triggered correctly on mobile. This can happen due to restrictive CSS (like overflow or z-index), or event handling differences between desktop and mobile [[source]](https://github.com/langgenius/dify/blob/e576b989b8eca4a7d8cfe6bdc91e9a451580489b/web/app/components/base/portal-to-follow-elem/index.tsx). To test a workaround, try increasing the z-index of the dropdown overlay and ensure no parent container has `overflow: hidden` or similar restrictions in mobile view. You can also compare your workflow dropdown's implementation and styles to the `WorkplaceSelector` component, which uses `z-[1000]` and specific mobile CSS tweaks to ensure visibility [[source]](https://github.com/langgenius/dify/pull/21115). If you have custom styles or layout wrappers in your workflow forms, check for any that might interfere with overlays in mobile mode. If the issue persists, inspecting the DOM in mobile view and checking for hidden or mispositioned dropdown elements can help pinpoint the cause. <!-- 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/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/a91ca63f-8c4d-4e99-805d-037a99895707?feedback_type=other)</sup>&nbsp;&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/22191)
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 good first issue 🌊 feat:workflow 🐞 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#15258
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?