Floated layout elements in $content variable cause Media Dialog height of 0

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;
}

Cheers,
Sheena

Assigning for review.

This is open for anyone to review.

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

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.

#2: 1328838-select-media-dialog-height-2.patch queued for re-testing.

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

Closing 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