Media Browser modal iframe dimensions are hardcoded

Unfortunately this seems to be the case.

#1517002: Adjust width of dialog box overlay didn't really fix anything, just ignored the fact that there is no good way to override these defaults.

In media.popups.js you have:

Drupal.media.popups.getDialogOptions = function () {
  return {
    buttons: {},
    dialogClass: 'media-wrapper',
    modal: true,
    draggable: false,
    resizable: false,
    minWidth: 500,
    width: 670,
    height: 280,
    position: 'center',
    overlay: {
      backgroundColor: '#000000',
      opacity: 0.4
    },
    zIndex: 10000,
    close: function (event, ui) {
      $(event.target).remove();
    }
  };
};

And that's what you get. You can't change them as far as I can tell. There are no drupal_alter() calls, they do not get merged into any other settings objects. They just get passed as-is into the stuff that actually creates the dialog.

Thankfully, because JavaScript is pretty loose in how you define functions, all you have to do is duplicate this code in your own JavaScript and change the default options. It's a little verbose, but it works.

(function ($) {
namespace('Drupal.media.popups');

/**
 * Returns the commonly used options for the dialog.
 */
Drupal.media.popups.getDialogOptions = function () {

  return {
    buttons: {},
    dialogClass: 'media-wrapper',
    modal: true,
    draggable: false,
    resizable: false,
    minWidth: 500,
    width: 1000,
    height: 280,
    position: 'center',
    overlay: {
      backgroundColor: '#000000',
      opacity: 0.4
    },
    zIndex: 10000,
    close: function (event, ui) {
      $(event.target).remove();
    }
  };
};
})(jQuery);

+1 for this

One thing to think of is would you want the iFrame to ALWAYS be the same size? For example someone is (god forbid) uploading media from their tablet?

Cheers

Tom

Changing to a feature request as it's not causing a bug, but would be very handy to have.

If you implement my above suggestion you do not have to hard code the width. You can specify a dynamic width via something like $(window).width() or a more advanced method. Do note that overall the media module has terrible mobile device support and you may run into issues using smaller sizes. Good luck if you have to support something like a Nexus 4.

Patches are welcome :) but any patches must be rolled against dev.

Hey all,

I needed this functionality for v1 but created a port for v2. To this end I'll open another issue with a backport. Furthermore a second issue will need to be created to pass these attributes to the modal overlay - background color & opacity. It seems these settings are not taken from the dialogOptions array. However the rest should work as expected.

Hope this helps,

Added introduced variables to uninstall hook.

Just stumbled across this thread, thought I'd chip in to say that I'd been running the following dubious CSS in my custom admin theme to get around this:

// Media browser modal box
// Original styles all set inline so need to use !important all over the place.
.media-wrapper {
  width: 90% !important;
  top: 10% !important;
}
.media-modal-frame {
  width: 100% !important;
}

Having a less dubious solution would be great. Support for more than just fixed dimensions - percentages or relative to $(window).width() is essential IMHO.

Tested, worked for me (Panopoly 1.6 demo site.) Super handy for solving z-index issues, and the ability to move it around.

Committed to http://drupalcode.org/project/media.git/commit/ecab531.

I hate to ask but can we please give proper git authorship? This patch took me a lot of time. There are also a lot of unknown git authors for media which makes it difficult to track.

Is there a way to retroactively give attribution using git commit?

=P ignore me aaron, I was a little stressed that day. Let me know what you think of the current menu structure in this patch. We might be able to refactor it a little; maybe all under /media/media-manager - e.g. media/media-manager/browser-settings, media/media-manager/popup-settings.

There is an issue with this patch, when the media browser is opened the first time it works as expected, but if you insert an image/file/video either through upload or library selection, the default settings are added once again making the settings array contain multiple values of the dialogOptions elements, this makes the media browser behave very strangely as it does not get the correct values set for zindex and the others.

have attach an image showing you the problem.

I will try to fix it today, but not sure if I can identify exactly where the settings array gets corrupted.

have pinpointed the issue, when media_attach_browser_js is called multiple times the settings are added multiple times by deep array merging, basically ending up with a structure where you have multiple values per "value" in your settings array.

have "fixed" it by ensuring that the attach behavior is only executed once.

/**
 * Attaches media browser javascript to an element.
 *
 * @param array $element
 *   The element array to attach to.
 */
function media_attach_browser_js(&$element) {
  static $js_attached = FALSE;
  if (!$js_attached) {
    $javascript = media_browser_js();
    foreach ($javascript as $key => $definitions) {
      foreach ($definitions as $definition) {
        $element['#attached'][$key][] = $definition;
      }
    }
    $js_attached = TRUE;
  }
}

And here you go with a patch that fixes the cause of the issue .

The CSS workaround in #9 works for me on alpha3.

patch from comment #17 works for me.

The patch from #17 fixes the issue I have using the Media browser on a multiple field within another overlay (panels IPE) where the z-index gets screwed up after adding "another item".

#17 Works for me as well

Committed to http://drupalcode.org/project/media.git/commit/6850aa0.

I have just upgraded to dev version from alpha-4 hoping to fix the issue with the modal width being more than 100% on small devices.

It did not fix. Am I supposed to set anything myself with JS or CSS?
Should I open a Support request issue?

More info:
I see a container with a fixed width of 500px and an iframe inside it with 100% width.
The container resizes automatically by changing the window width, but has a lower limit of 500px.
The (mobile) user cannot scroll horizontally, thus he can't close the dialog.

A simple css rule did the trick for me:

.ui-widget-content{
  max-width: 100%;
}