Posted by esmerel on November 1, 2011 at 11:40pm
5 followers
| Project: | Media |
| Version: | 7.x-2.x-dev |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
| Issue tags: | D7 stable release blocker |
Issue Summary
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.
Comments
#1
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.
#2
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
#3
Assigning for review.
#4
#5
This is open for anyone to review.
#6
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.