Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
In entity_browser.modal.js we are using next code to calculate modal height:
var vHeight = $(window).height();
This works fine for desktop but on mobile, it can return smaller height than the actual visual height because mobile browsers can show/hide browser bar and bottom bottom UI controls. This is especially visible on iOS, here is a screenshot on iPhoneX simulator with and without hidden UI:
With top and bottom UI elements:
Without top and bottom UI elements:
We can see a lot of wasted space.
Proposed resolution
As explained in https://stackoverflow.com/a/31655549 there are libraries that can help us with it but as a simple solution using window.innerHeight will return visual viewport height.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | improve-calculation-of-modal-height-3055838-2.patch | 1.44 KB | pivica |
| #2 | photo_2019-05-20_17-11-37.jpg | 67.02 KB | pivica |
| photo_2019-05-20_17-11-41.jpg | 69.71 KB | pivica | |
| photo_2019-05-20_17-11-24.jpg | 69.43 KB | pivica |
Issue fork entity_browser-3055838
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 #2
pivica commentedHere is a patch and a screenshot of how it looks now without browser UI elements:
This also works fine when UI elements are shown, the event is fired and a modal dialog will resize itself.
Comment #3
pivica commentedNotice here with the usage of window.innerHeight and window.innerWidth will include the area covered by scrollbars, however, this is not a problem for us because we are applying overflow hidden to the body when showing EB modal dialog.
Comment #4
pivica commentedComment #7
benstallings commentedClaude Code says:
Assessment — Good to merge:
- Removes two temporary variables (wWidth, vHeight) that were only used once each — cleaner.
- Removes two jQuery calls in favor of native browser APIs — marginally more performant and one fewer jQuery dependency in a hot resize/reflow path.
- The behavioral difference (scrollbar width, typically ~15-17px) is small but technically more correct for modal positioning.
- No risk of compatibility issues — window.innerWidth/innerHeight are supported in all browsers the module targets.
Clean, correct, no concerns.
Comment #8
anybodyThank you! Merged!