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.

#9 Screenshot-1.png18.15 KBParisLiakos
#7 before.png738 bytesDevin Carlson
#7 after.png18.39 KBDevin Carlson
#2 1328838-select-media-dialog-height-2.patch611 bytessheena_d
PASSED: [[SimpleTest]]: [MySQL] 11 pass(es).
[ View ]


esmerel’s picture

Media 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.

sheena_d’s picture

Title:element.style rendering with different height in IE vs chrome/firefox» Floated layout elements in $content variable cause Media Dialog height of 0
Project:Fusion» Media
Status:Active» Needs review
new611 bytes
PASSED: [[SimpleTest]]: [MySQL] 11 pass(es).
[ View ]

This 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:

.media-browser-page-wrapper .region.content,
.media-browser-page-wrapper #block-system-main {
float: none;
clear: both;


Dave Reid’s picture

Assigned:Unassigned» Dave Reid

Assigning for review.

Dave Reid’s picture

Dave Reid’s picture

Assigned:Dave Reid» Unassigned

This is open for anyone to review.

wroxbox’s picture

We 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;*/
clear:both; float:none;
I'll try to find time to make patch and test.

Devin Carlson’s picture

Status:Needs review» Reviewed & tested by the community
new18.39 KB
new738 bytes

The 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:

body, div.full-width {
min-width: 960px;

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.

aaron’s picture

ParisLiakos’s picture

Status:Reviewed & tested by the community» Needs work
new18.15 KB

Sorry but this patch breaks overlay on chrome (adds a vertical scrollbar)