Media Browser renders all tabs visible

tried it but does not work for me.

I installed an older media version where it works in another installation and the error is the same, maybe that´s a problem due to file entity or entity?

The patch in thread #2 worked for me, but only when viewing the Media Browser as a modal window. All tabs are still visible if I view the Media Browser as a page (from media/browser), because the template file is not being used in those circumstances.

Same as #5 for me. Patch fixes for modals, but not for /media/browser

Same as #6 for me. I'm not sure how the panes on the /media/browser page are being rendered. Should they be handled by a jQuery UI thing or a cTools thing?

Looks like the tabs/panes were just missing the wrapper that was present in the 1.x branch. media.browser.js expects a div#media-browser-tabset wrapper.

Attached patch adds wrapper, now tabs work both in modal overlay and media/browser page.

This works as advertised.

Patch in #8 isn't making any difference for me. /media/browser is fine but modals are still rendering all tab content at once.

I'm running latest dev for media & file_entity.

@danbohea, it's because you need to apply both patches, #2 & #8. The attached patch has changes from both patches.

Ahahaaa! Thanks for that. Now I feel really stupid. Will post back with results...

Cool, that fixes things. Thanks.

I recreated a patch from both original patches (much like #11 but hopefully this one will pass testing). Not sure how much of a difference it makes if this one succeeds but if it helps get this fix committed then great.

Is this still an issue with latest dev? I don't find I need this patch.

I have found that latest dev works out-of-the-box but if you upgrade from a previous version, you may need this.

In an effort to somewhat clean up the queue of redundant issues. Closing this for now. Please reopen if improper to do so.

@sylus I'm on the latest 7.x-2.x-dev (see e2625edf) and I'm still seeing all the tab content render instead of in separate tabs. It's fixed if I apply the patch in #15.

+1 for patch in #15.
I am on the latest 7.x-2.x-dev and had the same problem. Patch in #15 worked for me.
(I have upgraded from Media 7.x-1.2 to 7.x-2.x-dev)

unfortunately, after applying the patch: while media/browser works if i visit it outside of the "add media" modal, the modal itself is broken:/

I still don't find I need this patch, in fact adding it to latest media dev breaks my tabs completely. Since this seems to be related to an upgrade issue could it be related to: https://drupal.org/node/1968630?

Current built of media on a fresh install based on the following make file and tabs all work for me:

projects[media][version] = 2.x-dev
projects[media][subdir] = contrib
projects[media][download][type] = git
projects[media][download][revision] = e2625ed
projects[media][download][branch] = 7.x-2.x
projects[media][patch][1411340] = http://drupal.org/files/media-resize_images_in_wysiwyg-1411340-75.patch
projects[media][patch][2071073] = http://drupal.org/files/media-warnings-creating-default-object-from-emtpy-value-2071073-1.patch
projects[media][patch][2089913] = http://drupal.org/files/media-2089913-3-no-such-method-select.patch
projects[media][patch][2093435] = http://drupal.org/files/2093435-media-js-dialog-issues.patch

Also using latest dev of jQuery Update (v1.8 and) and UI (1.10.2)

tl;dr

Patches in #2 & #15 are no good for fresh installs of Media. Patch in #8 works for both fresh & non-fresh installs but only fixes the tabs at media/browser. We still need a decent solution for the modal tabs.

----

Fresh install

The patch in #15 is definitely not needed for a fresh install, I can confirm this now (even without jquery_update latest dev & all of the extra patches mentioned in #22). I can also confirm that applying the patch to a clean install with the latest dev version of Media does indeed *create* a tabs display problem that wasn't there before (all tabs displayed at once).

Not fresh install

However, it does seem that this issue persists for some users who do not have the option to do a fresh install. After applying the patch in #15, all appears to be fixed on a non-fresh install. I can't replicate the issues described in #21 - both the browser and modal work for me post patch. It seems other users in this thread are also experiencing success here.

I can also confirm that this issue is not related to https://drupal.org/node/1968630 as suggested in #22 (issue persists even if main content block is not being placed by Context module).

Moving forward

So I back tracked over the 2 patches that came before #15. If I apply the patch in #2 to a fresh install of Media, things get broken still. However, if I just apply the patch in #8 (without #2) all is well and it doesn't create any visible tab display issues (I checked the modals & the main browser at media/browser). Reminder: the patch in #8 fixes the tabs issue at media/browser but not in the modal boxes.

So, in order to get this fixed properly, I think we have to discount the patches in #2 & #15. If we can build on the work in #8 (which only fixes the browser at media/browser) and come up with a solution for the modal (that works on both fresh and non-fresh installs) then we should be good to maybe get something that can be committed :)

@duellj You wrote the patch in #8. Any chance you can take a look at an alternative fix for the tabs in the modals? I can test fresh vs not-fresh installs if that helps.

I missed something...

It seems that the browser at media/browser is already bust with a fresh install of Media 2 dev (all tabs displaying at once). It's just the modals that appear to be working out of the box. Can anyone else confirm this? If this is the case then we should probably consider committing the patch in #8 either way.

Patch at #8 not working in an existing install with latest -dev for me. #15 does.

Well that's promising, I'll give this another go myself now that we have a new dev version of Media and post results here.

Latest dev now fixes this entire issue for me completely (both fresh and not-so-fresh installs).

Patch #15 works for me, altho I could only partially apply it.

@drupalninja99 - see #27 above. Have you tried a dev version newer than December 2nd 2013? I haven't seen this issue emerge in a while now.

I am seeing this issue with the latest dev version (7.x-2.x-dev, 2014-Mar-13) as well as the alpha version (7.x-2.0-alpha3, 2013-Oct-25) of Media.

Also, the browser plugins configuration settings do not impact the tabs that are displayed -- all tabs are shown regardless of how many or how few are selected.

I tried the following options:

1. Patch 8 and Patch 15 with the latest dev version but neither had any impact.
2. Altering the Media Browser theme to rule out this being a theming issue -- I confirmed that the same issue occurs with Seven, Bartik as well as the site custom theme.
3. File Entity alpha3 and Dev versions.
4. Running cron and clearing cache with each option tested.

None of these have had *any* impact.

This is perplexing.

Any suggestions are appreciated.

@Donovan Is your current Media install fairly fresh & recent or has it gone through many upgrades? Only some people seem to be experiencing this issue and it mainly seems to be people running "not-fresh" installs that have been upgraded over time. More info of your setup in that respect would help here.

@danbohea: Thank you. This is a fresh install of Media. The first install was the latest 2.x dev version which exhibited the media browser issue immediately. I subsequently uninstalled the module (and all of its prerequisite modules), ran cron and update.php, deleted the module folders, and installed the Media 2.x alpha module. The alpha module exhibited the identical issue. Could this be an underlying Views issue -- I'm using Views 7.x-3.7 -- ? This is perplexing. Thanks again. I really appreciate your assistance.

Bizarre. I wonder if this is some kind of conflict with another module. Are you running jquery_update?

I added jquery_update after the fact to see if the jquery version made a difference. It is currently set to jquery version 1.5.

So you're saying that you're seeing the same symptoms before & after jquery_update?

Yes, the symptoms occurred before I installed jquery_update, and they persist after varying jquery versions (1.5, 1.7, 1.8, 1.9, and 1.10) -- so it doesn't appear to be singularly related to jquery. It appears that the culprit is affecting just the browser view since the module appears to work (I.e., it allows media upload, insertion and viewing).

Well, latest dev seems to have fixed every occurrence of this for me. I'm not sure what else to suggest.

Yes, this is baffling, but I do appreciate your help. Do you mind sharing which version of the following required resources/modules you are using?

- Javascript
- CTools
- File Entity
- Views

My next step might be to try uninstalling media completely again, checking that the database is completely purged of related tables, then reinstalling. Can you suggest how I can ensure that media is completely removed (I previously uninstalled the module(s), then deleted the module folders via FTP) ? Or where I can find a list of all of the database tables added by Media so I can confirm complete removal ?

Thanks again.

ctools 7.x-1.3
file_entity 7.x-2.0-alpha3+1-dev
views 7.x-3.7+23-dev
media 7.x-2.0-alpha3+34-dev
jquery_update 7.x-2.3+15-dev (running jquery 1.8)

As to Media's db tables, I couldn't accurately say. Someone else may be able to chime in there. Failing that, search the issue queue for specific uninstallation issues.

Keep us posted - I'd like to know what's really causing this.

@danbohea I tried completely removing and re-installing Media in multiple variations and could not resolve the issue. In the end, I abandoned Media completely and rolled an alternate solution using the Video Embed Field module and the Images field type. I have used Media previously and while not perfect, I was always able to configure a good image and video management solution -- so I believe the issue here was caused by an unidentified module compatibility issue. Thanks again for your assistance, it was much appreciated.

i only have this with seven. i switched to ember and that works. in seven all tabs are visible.

@marcoka That's a good lead. Maybe we're running different versions of D7 core and therefore possibly different versions of Seven. That would explain why the problem just seemed to vanish for me on a couple of projects.

The patch in nr #15 didn't work for me as well. I'm using the following setup:

• CKeditor 7.x-1.13+22-dev with patches:
  • ckeditor-accomodate-latest-media-changes-2159403-39.patch
• Media 7.x-2.0-alpha3+77-dev with patches:
  • 2177893-4-ckeditor4-media-plugin.patch
  • media-wysiwyg-improve-our-macro-handling-2126755-92.patch
  • media-ckeditor-bind-unbind-stripping.patch
• Adminimal theme

Without the patches it also didn't work, so I guess that shouldn't be the problem. Hope this helps...

*edit* After trying the WYSIWYG module with CKeditor the tabs DID work. Could this be a problem in the CKeditor module?

*edit 2* The patch in https://drupal.org/comment/8399997#comment-8399997 fixed it for me!

I experienced the same issue. I've tried, switching jQuery versions applying patches, disabling CKeditor. Nothing worked.

When I revoked all patches and switch from theme seven to ember, like Morka said, it appears to be working again.

So I thought we can conclude it's not really a jquery thing but maybe more theme / html / css related.

Then i noticed that ember has it's own jquery.ui.tabs: sites/all/themes/ember/styles/jquery.ui.tabs.css and has a defenition for the class .ui-tabs-hide that suppose to hide the different tabs.

I noticed that other themes do not have such file and make use of the jquery update module css file:
sites/all/modules/jquery_update/replace/ui/themes/base/minified/jquery.ui.tabs.min.css

This file does not hold a .ui-tabs-hide class inside there.

When i added:

.ui-tabs .ui-tabs-panel.ui-tabs-hide {
  display: none;
}

to the sites/all/modules/jquery_update/replace/ui/themes/base/minified/jquery.ui.tabs.min.css the tabs start working again.

Thank you a lot, @rbosscher, you saved me a lot of time. I had the issue concerning not hidden tab-content when i used quicktab module to build admin pages. Your solution adding the missing css works, but is pretty quick 'n dirty. What's a better way instead of hacking jquerys css-files? Where is the right place to file this issue?

Having the same problem. Applying "patch" from #44 to other module seems very dirty to me as well. I found out that everything is ok with jquery version 1.5 but in that case other stuff is problem (like trying to add view pane to panel is showing json string).

To add the missing CSS snippet, i used CSS Injector. It's dirty too, but more maintainable regarding updates.

I had the same issue. I tracked it down to having the now deprecated jquery_ui-7.x-1.x-dev module installed along with jquery_update-7.x-2.4 (jQuery UI is now packaged with jQuery Update module). I disabled and uninstalled the jquery_ui module and now the media browser tabs function as expected. I'm using media-7.x-2.0-alpha3

Many thanks @rbosscher that information (https://www.drupal.org/node/1974774#comment-8738945) has just fixed my Media Broswer tab issue after several hours of useless patching/unpatching/installing/uninstalling.

It seems like this issue is covering a few different problems... My issue was specifically that the media browser was not respecting the settings I had configured in the "WYSIWYG Configuration" on the media browsers settings page (admin/config/media/browser). This is the same issue as @SeanB mentioned in comment #43. However, the patch mentioned in that comment is against the CKEditor. For anyone who has switched over to using the media module's media_wysiwyg sub-module for CKEditor integration, you'll need to try this patch #2333855: Media Browser Settings for "WYSIWYG" aren't respected with CKEditor Module (e.g. browser tabs)

In the latest Media 2.x dev we could not add images to the Media Gallery. I applied a quick fix, by removing the multiselect option. Patch is here: #2145723-12: Cannot add image to gallery

As far as I can tell the original issue was related to the theme used to render the page in the media browser.

The structure of $vars['page'] can differ from theme to theme.
The original patch in #2 fixes media-dialog-page.tpl.php for another theme.

I created an omega subtheme and ran into the same issue.
I need this to work in an install profile, so I attached a patch for omega.

It is neater to create your own template for the page to be rendered and add it to your own theme.
When I have some more time I will have a look at it and post it.

As promised my cleaner solution to this problem.

Easiest solution is to implement hook_theme_registry_alter() in your module (I named it mymodule) and override the template attribute for the media_dialog_page entry in the theme_registry.

function mymodule_theme_registry_alter(&$theme_registry) {
  // Override the media dialog page template.
  if (isset($theme_registry['media_dialog_page'])) {
    // We append the full path to the 'template' parameter. 
    // See https://api.drupal.org/comment/29013#comment-29013.
    $path = drupal_get_path('module', 'base');
    $theme_registry['media_dialog_page']['template'] = $path . 'sites/default/modules/mymodule/mymodule-media-dialog-page';
  }
}

Then copy sites/all/media/templates/media-dialog-page.tpl.php to sites/default/modules/mymodule/mymodule-media-dialog-page and make the necessary changes to make it work with your preferred theme (necessary changes for omega based themes can be found in the previous patch).

You have to clear the registry cache to have the changes in hook_theme_registry_alter() take effect.

Thank you Havran, #2 along with switching to the Seven theme fixed the issue for me.

I have just discovered this issue and Google brought me here.

None of the patches concerning media-dialog-page.tpl.php are working for me. In fact they break the display. However, I haven't looked into why that solution is being suggested. That work still may be valid.

As others in this thread, op included, I believe the issue is linked to missing css/js resources. I noticed the media browser's iframe didn't include jquery.ui.tabs.css. This only happens with jquery_update enabled. So, is this a jquery update issue?

in media.css, the following solves the problem:

.ui-tabs .ui-tabs-hide {
  display:none;
}

With the last version 7.x-2.0-beta1, i have got this problem. All tabs are visible whereas parameters are set to hide some of them.

Anybody have the same problem? and eventually a solution to this?

NB : I try all the different solution of this thread and nothing works... It doesn't seems to be a CSS/JS problem but i can't find the origin of this problem :/

I am having this same problem with 2.0-beta1. It happened when I increased jQuery from 1.7 to 1.8 as recommended in #1743040: "You have not selected anything!" error message, when a selection has clearly been made.

I am using media (7.x-2.0-beta1+8-dev) with the editor module and editor's ckeditor submodule.
The easiest workaround is to use the hook_media_browser_params_alter.

/**
 * Workaround https://www.drupal.org/node/2333855
 */
function themename_media_browser_params_alter(&$params) {
  $params['enabledPlugins'] = variable_get('media_wysiwyg_wysiwyg_browser_plugins', array());
}

@Comment #59 (#1974774-59: Media Browser renders all tabs visible) I do not see where the class .ui-tabs-hide ever appears using the Seven or Adminimal administration themes, so this solution does not seem to work.

Changing to Ember theme is a very quick fix! Thanks @rbosscher

If using CKEditor module, and Media module beyond version 7.x-2.0-beta1

be sure to use Media CKEditor module

And patch #2333855-13: Media Browser Settings for "WYSIWYG" aren't respected with CKEditor Module (e.g. browser tabs)

I've figured something out... When in your admin theme, the 'Main page content' block is enabled and placed in a region, the tabs won't render, because the content of the media browser will be in div.region.region-content and not in div#media-browser-page-wrapper

Recent versions of media have resolved most of peoples concerns and is compatible with entity translation, multilingual and various advanced configurations. Due to the high volume of inactive and most often irrelevant issues we are Closing this as (outdated). If for whatever reason this issue is important to you AND you still have issues after checking the media recipe documentation, then let us know and we will review your concerns.

Otherwise, see the recipe documentation for how to configure media and for troubleshooting tips OR refer to the media_dev distribution if you want to see a working media setup.

As mentioned, feel free to make some noise in this issue if you still feel it is important to you or someone else.

Thanks,

Media team