Media library css bug

Support
1

Hi,

I’ve just updated CP to v2.3.1 so don’t know if this bug was present previously.

In the media library when an image is selected and the modal pops up the back/forward/close buttons top right of the modal aren’t able to be clicked.

The div holding the absolutely positioned buttons (.edit-media-header) is covered by the div with class .media-frame-title.

Adding a z-index of 999 to the buttons allows them to become clickable.

I’ve tested using Firefox and Chrome (on Mac) and the problem persists.

I’ve shared a video here showing the problem and the solution.

https://drive.google.com/file/d/1z0oHiggUUEgs6RHJ7ELH5wVd4-v60Dpx/view?usp=sharing

Thanks,

Byron

2

There’s something else going on here. At the very beginning of your video, there’s a gap between the top bar where the buttons are and the rest of the modal. That is not there in a fresh ClassicPress install. So you need to identify what is causing that; it’s almost certainly the same thing that’s causing the issue you reported.

There are two possibilities. One is highlighted by the fact that you said that .edit-media-header is absolutely positioned. I don’t remember whether it was before, but it certainly is not in CP v2.3.1. So it’s possible you have a caching issue.

The alternative is that you have a plugin conflict. If you can rule out the caching issue, can you try deactivating all the plugins, clear caches again, and see whether the problem persists?

3

Hi Tim, thanks for the reply, I’ll have to do some more troubleshooting :slight_smile:

Just for clarity, I mentioned the buttons being absolutely positioned not the div but if nobody else is seeing this it’s going to be my set up :slight_smile:

Thanks,

Byron

4

Oh, OK, yes the buttons are absolutely positioned. So it’s almost certainly a plugin conflict.

5

You’re correct! :slight_smile:

Disabling ACF fixes the issue. Now I just need to find out a workaround.

Thank you :slight_smile:

2 Likes
6

Try this CSS:

.upload-php .edit-media-header button {
	z-index: 999;
}
.upload-php .media-frame-title {
	left: 0;
}
.upload-php .media-frame-content {
	top: 50px;
	left: 0;
	bottom: 0;
}
7

Hi Tim, this is perfect, thank you :slight_smile:

8

Great, you’re welcome!

I’m hoping to work on the media widgets in the spring. If I can get that done (which I’d like to do by the summer) then it should be possible to rationalize a lot of the CSS on the media and widgets pages so that adjustments like this will then no longer be needed.

1 Like
9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.