craftcms / craftcms/cms

[5.x]: Admin asset field dropdown being cut off of the UI

Open
#18,675 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
PHP
Stars
3.6k
Forks
705
Avg merge
1d 5h
Merged PRs (30d)
134

Description

What happened?
Description

We had a client report that they were unable to see all dropdown options on an asset (the little dropdown that lets you preview, download, etc) if the field was at the bottom of a page.

Screenshot showing the issue in action:

Image
Steps to reproduce
  1. Set up an entry form that has enough fields to make you need to scroll
  2. Have the final field be an asset field
  3. Populate the asset section and save the entry
  4. Try clicking the '...' link on the asset you added
  5. The dropdown menu will open at tne bottom instead of above the field, making it cut off the bottom of the page if there is nothing else allowing the page to be longer than the space it needs.
Expected behavior

The positioning of the dropdown should be more dynamic, repositioning itself to above the button if the window does not provide enough space for it to be below it.

Actual behavior

The dropdown links are cut off due to it going below the scrollable area.

Additional Notes
  • This issue is present on Chrome and Firefox (latest versions, Chrome on macOS, Firefox on Windows)
  • This was reproducible via multiple admin accounts, some with Craft dev toolbar enabled, some without
Craft CMS version

5.9.14

PHP version

8.4

Operating system and version

Ubuntu 24.04

Database type and version

MySQL 8.x

Image driver and version

N/A

Installed plugins and versions
  • Verb Comments 3.0.13
  • Control Panel Nav 5.0.6
  • Craft Commerce 5.5.4
  • Digital Products 4.0.3
  • Document Search 4.0.2
  • Embedded Assets 5.4.7
  • Feed Me 6.11.0
  • Incognito Field 2.0.1
  • Olivemenus 5.0.0.
  • SEO 5.0.0
  • Wheel Forms 4.0.4
  • CKEditor 5.0.1
  • Verb Events 3.0.14

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the admin entry form using the final asset field and the asset “...” menu, with enough fields to require scrolling. Start by tracing the dropdown’s positioning behavior in the admin UI; done means the menu remains fully visible by opening above the button when there is insufficient space below.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.