Joomla-cms: Image Manager not responsive and no horizontal scrollbar

[ReLater]

Steps to reproduce the issue

• Nightly Build 3.8.8-dev, 2018-05-09. Also reported for Joomla 3.8.7.
• Edit an article with smartphone or with reduced display width. Editor TinyMCE.
• Click Image button.
• PopUp window has no horizontal scrollbar and is not responsive.
• See image

[brianteeman]

updated title - this is not a tinymce issue. it is an issue with the joomla media manager modal

[twister65]

I do not agree with you. This is a TinyMCE issue. I tested it with the JCE editor and the pop-up window is responsive (which is not the case of TinyMCE).
Please, see issue #18447

[brianteeman]

This is not from tinymce this is the joomla image manager
JCE uses its own image manager

If you read the issue you link to you will see that it confirms what I am saying but as you clearly don't believe me go to plugin manager and disable the Button - Image plugin which is what loads the joomla image manager

[twister65]

If I disable the Button - Image plugin, the Image button (on which I clicked) has disappeared below JCE.
The Image pop-up window is also responsive with Code Mirror.

[twister65]

But, it is an iframe window defined with a fixed size.
https://github.com/joomla/joomla-cms/blob/78deef82518f86c1c08f59ed2ddfe5fac327cfcf/plugins/editors-xtd/image/image.php#L68

[brianteeman]

so we agree it is nothing to do with tinymce then ?

[twister65]

I'm not sure because there is also a css file for the popup window :
https://github.com/joomla/joomla-cms/blob/78deef82518f86c1c08f59ed2ddfe5fac327cfcf/media/media/css/popup-imagemanager.css#L27
This file does not seem to be loaded with TinyMCE.
https://github.com/joomla/joomla-cms/blob/78deef82518f86c1c08f59ed2ddfe5fac327cfcf/administrator/components/com_media/views/images/tmpl/default.php#L31

[brianteeman]

exactly what I have been sayinng

Note I do not disagree that there is an issue just that it is nothing to do with tinymce

[twister65]

The size of div (TinyMCE) is that defined of iframe :

<div id="mceu_103-body" class="mce-container-body mce-window-body mce-abs-layout" style="width: 798px; height: 498px;">
  <iframe src="http://localhost/olaverre/administrator/index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;e_name=jform_articletext&amp;asset=95&amp;author=801" tabindex="-1">
  </iframe>
</div>

[twister65]

With Code Mirror and JCE (external button : below), we have :

<div id="sbox-window" role="dialog" aria-hidden="false" class="shadow" style="z-index: 65557; left: 230px; top: 233px; width: 800px; height: 500px;"><div id="sbox-content" class="sbox-content-iframe" style="opacity: 1;">
  <iframe src="http://localhost/olaverre/administrator/index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;e_name=jform_articletext&amp;asset=95&amp;author=801" frameborder="0" width="800" height="500"></iframe>
</div><a id="sbox-btn-close" href="#" role="button" aria-controls="sbox-window"></a></div>

[twister65]

In the script jce.js, we have :
Joomla.modal=function(el,url,width,height){var o={handler:"iframe",size:{x:width,y:height},url:url,onOpen:function(){$("#sbox-window").css({width:"auto",height:"auto"})}};...

This explains why the popup window is responsive with this editor.

[twister65]

Code Mirror and JCE editors use SqueezeBox (Expandable Lightbox). Unfortunately not for TinyMCE.
See : https://github.com/joomla/joomla-cms/blob/eb68e01fada0ceac8695c386c9f9ac143db2f079/media/system/css/modal.css#L55-L61

[twister65]

Filery is using the UI of TinyMCE for the dialog. Unfortunately, the dialogs are not responsive, so the dialog of Filery cannot be responsive too.

TinyMCE 5 incoming, which is responsive: https://www.tiny.cloud/developer-preview/

https://github.com/Neoflow/Filery/issues/9

[infograf768]

As far as I know from TinyMCE 4.6 up, it would not work for all browsers which are supported by Joomla.

[twister65]

You can close this issue. See PR #23091.