Display issue in media modal

  • Resolved Johan van der Wijk

    (@vanderwijk)


    5 years, 3 months ago

    In WordPress 5.3 some new select box styles have been introduced that seem to conflict with the F4 media taxonomies plugin.

    This is how the media modal filters are supposed to look:

    And this is what it looks like after activating the F4 Media Taxonomies plugin:

    I guess this affects

    This is the CSS that seems to be the culprit:

    .media-frame select.attachment-filters:last-of-type {
    margin-right: 0;
    width: auto;
    max-width: 100%;
}

    Changing it to this seems to fix it:

    .media-frame select.attachment-filters:last-of-type {
    margin-right: 0;
    width: auto;
    max-width: inherit;
}

    I have switched to your plugin from the Enhanced Media Library PRO because that plugin has major issues with WP 5.3 and seems to be abandoned.

    Fixing this issue would make it a perfect replacement!

    Many thanks,

    Johan

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author FAKTOR VIER

    (@faktorvier)

    Hi @vanderwijk

    Thanks for your feedback!

    We’re currently working on 5.3 compability updates for all our plugins. We’ll release an update on monday or tuesday, next week.

    Thread Starter Johan van der Wijk

    (@vanderwijk)

    That’s great to hear! I have done some further digging and changing your plugin’s style.css to this should fix it:

    /* MEDIA FILTERS */
.media-modal-content .media-frame select.attachment-filters {
	width: calc(33% - 12px);
}

.media-frame.mode-edit .media-toolbar-secondary .view-switch {
	flex: 1 0 auto;
}

.media-frame.mode-grid .spinner {
	margin-top: 0;
}

.media-toolbar .spinner {
	flex: 0 0 20px;
}

    (I have removed the display: flex from .media-frame .media-toolbar-secondary and made sure all 3 dropdowns occupy one third of the available space)

    Plugin Author FAKTOR VIER

    (@faktorvier)

    Hi @vanderwijk

    Thanks again for your feedback and further analysis!

    We couldn’t really rebuild what exactly caused the dropdowns to look like in your screenshot (which browser are you using?), but we tried another approach. It would be awesome if you could try out our new css, before we release this change as a new version.

    Just replace the code between /* MEDIA FILTERS */ and /* SELECTIZE */ with the following:

    .attachments-browser .media-toolbar {
	display: flex;
}

.attachments-browser .media-toolbar .media-toolbar-secondary,
.attachments-browser .media-toolbar .media-toolbar-primary {
	max-width: none;
}

.attachments-browser .media-toolbar .media-toolbar-secondary {
	flex: 1;
}

.media-modal-content .media-frame .media-toolbar select.attachment-filters {
	width: auto;
	margin-right: 10px;
}

    If this is not working correctly, we’ll stick with your approach.

    Thread Starter Johan van der Wijk

    (@vanderwijk)

    Unfortunately that does not work well when the taxonomy names are very long as the select box then wraps under the existing filters and is no longer visible:

    The first screenshot I took from a window that I opened using the ACF (Advanced Custom Fields) attachments field (hence the .attachments-browser classnames). So that is why it looks different. I have now tested it using the media upload button above the content editing area for a post.

    This code works best for me both when adding a media item to a post or an ACF attachment. It divides the available space up in three parts and allows space for the animated spinner:

    /* MEDIA FILTERS */
.media-modal-content .media-frame select.attachment-filters {
	width: calc(100% / 3 - 17px);
}
.media-modal-content .media-frame select.attachment-filters {
	margin-right: 10px;
}
.media-frame select.attachment-filters:last-of-type {
	margin-right: 1px;
}
    Plugin Author FAKTOR VIER

    (@faktorvier)

    Thats true, we didn’t thought about the overflow if its too wide… The problem is, that we can’t rely on a fixed % width, because everyone can have as many dropdowns as they like. I think the only dynamic approach is flexing the fields to an even width:

    .attachments-browser .media-toolbar {
	display: flex;
}

.attachments-browser .media-toolbar .media-toolbar-secondary,
.attachments-browser .media-toolbar .media-toolbar-primary {
	max-width: none;
}

.attachments-browser .media-toolbar .media-toolbar-secondary {
	display: flex;
	flex: 1;
    align-items: flex-start;
}

.media-modal-content .media-frame .media-toolbar select.attachment-filters {
	flex: 1;
	width: 50%;
	margin-right: 10px;
}

.media-modal-content .media-frame .media-toolbar .spinner {
	flex: 0 0 20px;
	align-self: flex-end;
	margin-right: 20px;
	margin-bottom: 15px;
}

    The downside is, that the dropdowns are wider than usual, because they fill up the whole row now.

    Thread Starter Johan van der Wijk

    (@vanderwijk)

    That is a very clever solution and it works great on my site!

    I don’t mind the fact that the dropdowns are slightly wider but it might look a bit better if you make the taxonomy filter wider than the others by adding this:

    .media-modal-content .media-frame .media-toolbar select.f4-media-taxonomy-filter.attachment-filters {
	flex: 2;
}
    Plugin Author FAKTOR VIER

    (@faktorvier)

    We’ll stay with flex: 1 for every dropdown, I think this makes the most sense.

    We’ve just released a new Version that should be compatible with WordPress 5.3. I hope everything works fine now for you.

    Thanks again for your time and help, we really appriciate it!

    Cheers from the FAKTOR VIER team!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display issue in media modal’ is closed to new replies.