The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem/Motivation
When uploading an image in an entity browser with a Dropzone widget, I see file_browser attaches libraries and injects a CSS class in the actions.
https://git.drupalcode.org/project/file_browser/-/blob/2.x/file_browser....
The problem we're seeing is the Insert Selected action (the first action after dropping the image into the Dropzone widget) is positioned below the Use Selected action.
<div class="file-browser-actions form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions">
<input class="is-entity-browser-submit button button--primary js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Select entities">
</div>
<div class="file-browser-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-selection-display" id="edit-selection-display">
<div class="entities-list js-form-wrapper form-wrapper" data-drupal-selector="edit-selected" id="edit-selected" data-once="register-add-entities register-remove-entities file-browser-add-count">
</div>
<input id="ajax_commands_handler" data-drupal-selector="ajax-commands-handler" type="hidden" name="ajax_commands_handler" value="" data-once="drupal-ajax register-execute-commands">
</div>
Because both outer `
` have the class "file-browser-actions", they get the same position fixed with a solid background. The problem is, the second one covers the first, completely obscuring the button.
NOTE: I am using the latest version of Gin supporting Drupal 10.
Steps to reproduce
Install entity_browser, file_browser.
Entity browser configuration:
- General settings
- Modal
- Widget settings
- Widget plugin: DropzoneJS
- Automatically submit selection: Unchecked
Proposed resolution
I am not sure, but maybe there's a CSS only solution?
Probably a naive solution: maybe something like:
.file-browser-actions + .file-browser-actions {
transform: translateY(3rem);
}
It actually works beautifully in my browser :)
Remaining tasks
This is an old site, and I haven't tested in a clean install, but it is pretty up-to-date, and we haven't monkeyed with the admin theme much. There are a ton of modules installed and legacy settings, so who knows? The fact that I am not seeing other issues about this makes me a little suspect...
User interface changes
Hopefully show a hidden button :)
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | Screenshot 2026-07-24 at 11.38.03.jpg | 113.29 KB | piotr pakulski |
Issue fork file_browser-3605990
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #4
sriram_s commentedOpened MR !25 with a CSS-only fix — un-pins the trailing actions bar so it no longer covers the button. Tested under Gin in both modal and inline views.
Comment #5
piotr pakulskipatch fixed the problem for me
Comment #7
piotr pakulskiactually after some testing the problem is not solved.
Scenario:
generate some status message - for example upload more files for single cardinality field. You will get error message and again the button is overlapping - see screen.
I believe we should NOT "double" attach the class "file-broser-actions" here https://git.drupalcode.org/project/file_browser/-/blob/2.x/file_browser....
For me looks like historical regression that always was problem but was not visible at least for "seven" theme. In GIN which styles the selection entities-list as a taller grid and uses larger status messages inside the Entity Browser iframe it is really visible and is a blocker.
I'm using "Browser for files (modal)" mode - that is affected by the double "if".
The ""Browser for files no preview (modal)" works just fine.
I'm proposing https://git.drupalcode.org/project/file_browser/-/merge_requests/27