Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Entity browser dialog should define max height to its embedded iframe. Without it for smaller screens dialog will usually be higher then screen it self.
Here is how an entity browser dialog looks for small screens, basically user can not even use them because close and select buttons are not in viewport:
Tablet version
Mobile version
Comments
Comment #2
pivica CreditAttribution: pivica at MD Systems GmbH commentedComment #3
Primsi CreditAttribution: Primsi at Examiner.com for Examiner.com commentedSome efforts were already made to improve this here #2684989: Entity Browser Responsive Modal Dialog.
Comment #4
pivica CreditAttribution: pivica at MD Systems GmbH commentedHere is a patch that is fixing this.
Note that you also need #2692805: Dialog min/maxHeight options are ignored in some cases in order to get next screen-shots:
Tablet version (upload tab):
Tablet version (browser tab):
Mobile version:
Looks much better. We still have a small width problem for mobile screen which is maybe a follow up.
Also note that we can use next CSS rules to put button bar on bottom of a modal (similar like on screen-shot examples):
Maybe we should add this kind of rules also to entity_browser so custom implementations don't need to do the same thing?
Comment #5
pivica CreditAttribution: pivica at MD Systems GmbH commentedYes I'm familiar with that issue, the problem I see there is that that proposal is adding a lot of complexity to the code. From my point of view, end user should not hard code in pixels dimensions of the dialog for small screens but dialog it self and it components should be responsive.
This proposal is much cleaner and involves only couple of CSS rules and related core patch #2692805: Dialog min/maxHeight options are ignored in some cases.
Comment #6
jhedstromI'd tend to agree that hard-coding in dimensions will make this a bit unwieldy on mobile and other responsive situations.
Comment #7
slashrsm CreditAttribution: slashrsm at MD Systems GmbH commentedComment #8
tjwelde CreditAttribution: tjwelde at Thunder commentedCan't reproduce this with plain entity browser, since the height for the iframe and the outer .ui-dialog-content are set by javascript on resize. Seems like the screenshots are from a media entity browser. Is this an issue with that?
Can you provide steps to reproduce this error?
Comment #9
BerdirThis is an issue with entity browser within entity embed, for example.
Comment #10
slashrsm CreditAttribution: slashrsm at MD Systems GmbH commentedThis is currently blocked on #2692805: Dialog min/maxHeight options are ignored in some cases. We will be able to come back to this when that lands.
Comment #11
slashrsm CreditAttribution: slashrsm at MD Systems GmbH commentedComment #12
csd713 CreditAttribution: csd713 commentedI agree with @tjwelde. We need steps to reproduce the issue.
I installed Entity Browser module and Entity Browser Example, created a new entity browser. I added a field of type content reference to the Entity Browser test and used my new form. I added node of that type and the Entity browser looked fine. What else do i have to do to reproduce the problem.?