WP 5.4 + MLA 2.82 = broken display of Add Media page

Thanks for your report; I regret the trouble you are having with the new WP and MLA versions. I have not seen this problem on my own system and I just ran a quick test but can’t make it happen. There were changes made to the Media Manager Modal Window in the WP 5.4 update and I made some MLA changes to accommodate them, so it’s quite possible there’s a problem I can’t reproduce yet.

As a workaround, you can try disabling some MLA enhancements instead of deactivating MLA completely. Go to the Settings/Media Library Assistant General tab and scroll down to the “Media Manager/Media Grid Enhancements” section, then uncheck the first two boxes to prevent MLA from downloading any JavaScript to your browser. Scroll to the bottom and click “Save Changes” to save your work. If that works, let me know.

It would also be helpful to know more about your experience. Does this problem only happen on post/page inserts, or does it also happen in the Media/Library Grid view? Does the problem get better or worse if you widen or narrow the browser window? Can you tell me what browser you’re using? What theme are you using, and are you using the WordPress editor or a page builder?

Any additional details you can provide will be helpful. Thanks for your patience and understanding.

papijo,

I’m having the same problem, but there’s an easy workaround. With the Add Media window up, click over to “Upload Files” then click back to “Media Library.” That fixes it for me, so maybe it will work for you.

David,

WRT my system:

1. I’ve only been able to make it happen on a page/post insert.
2. Enlarging the browser window has no effect.
3. I’m using Brave browser.
4. Divi theme
5. Divi page builder

I can seen screenshots if that would help.

@postmastergs Your workaround works fine. Thanks!
@dglingren Your workaround works too:
As a workaround, you can try disabling some MLA enhancements instead of deactivating MLA completely. etc.
Same remarks as @postmastergs
+ Firefox & Chrome browsers
+ (customized) SKT Corp theme
Keep safe everyone!

Thanks to both of for your updates and additional information. I regret that I am no closer to identifying the cause of this problem. I did find and install the “Brave browser”, but it works fine on my system, as do Chrome and Firefox. The Divi theme and page builder are premium components, and I cannot afford to purchase them simply to support my own free plugin. I did download and activate the “SKT Corp theme” but this works fine as well. The theme doesn’t really affect admin mode screens so that is not surprising.

At this point, unless you can add more details, I can only suggest two alternatives. First, live with the problem and use either of the workarounds. Second, contact me at my web site for some additional ideas. I will leave this topic unresolved for now; thanks for your patience and understanding.

David,

It appears to be purely a CSS problem. I opened the browser’s Inspect function, and was able to uncheck two styles and temporarily correct the problem.

There’s an inline style being applied as follows:

<ul tabindex="-1" class="attachments ui-sortable ui-sortable-disabled" id="__attachments-view-1242" style="top: -115px;left: -230px;">

The negative top and left styles are shifting the unnumbered list containing the images outside of the modal window. I haven’t been able to find exactly where that code comes from, since it’s an inline style and is a bit difficult to locate. If I uncheck those two styles in the Inspector, however, the images shift back to their proper place in the modal window.

@postmastergs –

Thank you for your excellent detective work! The inline styles are added by jQuery as a consequence of some code I added to MLA v2.82. The (uncompressed) mla-media-modal-scripts.js file contains this function on lines 805-828:

toolbarOpen: function() {
	var toolbarOffset, toolbarHeight, attachmentsOffset;

	toolbarOffset = $( '.attachments-browser .media-toolbar' ).offset();
	toolbarHeight = $( '.attachments-browser .media-toolbar' ).height();
	attachmentsOffset = $( '.attachments-browser .attachments' ).offset();
	attachmentsOffset.top = toolbarHeight + toolbarOffset.top;
	$( '.attachments-browser .attachments' ).offset( attachmentsOffset );

	$( window ).resize( function() {
		var newHeight, toolbarOffset, attachmentsOffset;

		newHeight = $( '.attachments-browser .media-toolbar' ).height();
		if ( newHeight !== mlaModal.settings.oldHeight ) {

			toolbarOffset = $( '.attachments-browser .media-toolbar' ).offset();
			attachmentsOffset = $( '.attachments-browser .attachments' ).offset();
			attachmentsOffset.top = 20 + newHeight + toolbarOffset.top;
			$( '.attachments-browser .attachments' ).offset( attachmentsOffset );

			mlaModal.settings.oldHeight = newHeight;
		}
	} )
},

The jQuery offset( attachmentsOffset ) function calls on lines 812 and 823 are trying to move the attachments-browser window ( HTML div ) to a location just below the toolbar, which as several controls added by MLA. on my system, the top: style is always positive and ranges from about 124px to over 500px for a very narrow window. The left: style is always 0px. As you can see, the above code never alters the left: value, just the top: value.

The code is pretty simple and I don’t see why it causes the problem you’ve identified. I am reluctant to make changes until I understand what’s going on. It would be great if you could contact me at my web site to investigate further. Thanks again for your efforts.

Hi!
I think I have found the reason for the problem. I am using FooGallery on my WP site(s). Free version 1.9.11.
If I de-activate FooGallery, then the display bug in MLA disappears.
@postmastergs are you also using FooGallery on your site?

@papijo –

Thanks for your update and for your detective work. I will try installing FooGallery to see if I can reproduce the problem and make some progress.

I’m not. I use NextGen Gallery, but deactivating it had no effect on this problem.

I have been able to reproduce the problem by alternating between “insert media” and “set featured image” on a given post. It looks like jQuery cannot reliably return the height of the toolbar in all cases. I am looking into some other way of positioning the attachments window below the toolbar. Thanks for all your efforts and your patience.

I have released MLA version 2.83, which contains a fix for the problem you reported. Thanks for your help in alerting me to this MLA defect and awaiting the resolution.

I am marking this topic resolved, but please update it if you have any problems or further questions regarding the fix in the latest version.

That fix works fine for me. Many thanks for that quick fix, David @dglingren !
Keep safe!
Joseph