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.
I added media.module to my site and set it up to add a field to the Article content type. When I click the 'select media' link, the pop up window is 2 px high - it looks like it starts to render at the correct size (height 550 I think) but ultimately it is 2 px high.
element.style {
height: 2px;
min-height: 0;
width: 800px;
if I change height to 500 or so, I can see the whole window. I tried in bartik in chrome and ff and the window seems to work.
Comment | File | Size | Author |
---|---|---|---|
#9 | Screenshot-1.png | 18.15 KB | ParisLiakos |
#7 | before.png | 738 bytes | Devin Carlson |
#7 | after.png | 18.39 KB | Devin Carlson |
#2 | 1328838-select-media-dialog-height-2.patch | 611 bytes | sheena_d |
Comments
Comment #1
esmerel CreditAttribution: esmerel commentedMedia module 2.x-dev
I tried this both with fusion starter and clean commerce and had the problem. With bartik I did not.
My admin theme is whatever the default theme is.
Comment #2
sheena_d CreditAttribution: sheena_d commentedThis is caused by Fusion's layout, which uses a lot of floating, etc. Although the immediate cause is CSS within Fusion, I feel that this is a bug with the Media module rather than with Fusion itself.
The modal created by Media for the Media Dialog is an iFrame inside of a javascript dialog box. The drupal page in the iFrame is rendered by a custom page template in Media (media-dialog-page.tpl.php) - with the goal of only printing out the $content region. With Fusion, the $content region is styled with a lot of grid-centric CSS, including floats, which are not cleared because the wrapping HTML provided by Fusion Core is not included in Media's stripped-down page template file. All of this causes the javascript for the dialog to incorrectly calculate the height of the iFrame as 0.
Floating divs in order to create div-based layouts is ubiquitous in many themes and floating the divs that wrap $content is not unique to Fusion. The easiest and most reliable way to prevent this issue from re-occurring in ANY theme would be to edit Media's media-dialog-page.tpl.php file to include a clearfix on its wrapping divs.
Attached is a patch for the Media module that makes this change to media-dialog-page.tpl.php
However, it is possible that many users that do not use an admin-only theme (Seven, Rubik, etc.) as their admin theme can potentially run into a lot of other styling problems with this method of creating the modal window. For example, a theme with a dark background that uses wrapping divs in page.tpl.php to put a white background on the main content (and thus dark text on the main content) could result with a dark background and dark text for the "Select media" dialog when the theme's page.tpl.php file is overridden.
Perhaps the best, long-term solution would be to utilize hook_custom_theme() to set a Drupal default theme (Seven or Bartik) as the theme used on the page that appears via iFrame in the Media dialog (and/or provide a module setting that can change the theme used for the dialog).
If the Media maintainers do not accept this patch or you would like a fix for your Fusion-based theme in the meantime, this is an acceptable CSS work-around:
Cheers,
Sheena
Comment #3
Dave ReidAssigning for review.
Comment #4
Dave ReidComment #5
Dave ReidThis is open for anyone to review.
Comment #6
wroxbox CreditAttribution: wroxbox commentedWe don't need more clearfixes to html markup. Instead this should be fixed with css
overflow: auto; /*instead of the clearfix bull /hidden/scroll/auto;*/
or
clear:both; float:none;
I'll try to find time to make patch and test.
Comment #7
Devin Carlson CreditAttribution: Devin Carlson commentedThe patch in #2 still applies cleanly and made the media dialogue page usable when using the Fusion starter theme. Adding a clearfix will also apply
overflow: auto;
as wroxbox suggested in #6.Unfortunately, the dialogue will still look slightly odd as the Fusion theme specifies:
which results in the dialogue popup having scrollbars since it is smaller than 960px. However, I don't see any ideal solution to this until #1139514: Overhaul the media browser code to not use an iframe, and be more understandable, maintainable, and extendable is resolved and would suggest that you simply use a theme that is known to work, such as Bartik or Seven.
Comment #8
aaron CreditAttribution: aaron commented#2: 1328838-select-media-dialog-height-2.patch queued for re-testing.
Comment #9
ParisLiakos CreditAttribution: ParisLiakos commentedSorry but this patch breaks overlay on chrome (adds a vertical scrollbar)
Comment #10
Chris Matthews CreditAttribution: Chris Matthews as a volunteer commentedClosing this issue as outdated. However, if you think this issue is still important, please let us know and we will gladly re-open it for review.
sincerely,
- the Drupal Media Team