Popup toolbar width breaking layout

  • Resolved brtech

    (@brtech)


    3 years ago

    Hi,

    in a previous update, “mla-media-modal-style.css” was changed to the media modal toolbar having a width of 100% instead of auto which leads to a break in the layout and gallery controls no longer being fully visible.

    The CSS in question is in line 38:

    body.mla-media-modal .attachments-browser .media-toolbar-secondary {
    max-width: none;
    width: 100%; /*auto; */
}

    Is there any way to change this back to auto and copy the file into a child theme so the change is update safe?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thank you for your report and for taking the time to identify the CSS style in question; very helpful. The Media Modal toolbar has been a persistent source of trouble as noted in these earlier topics:

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

    Attachments toolbar cropping attachments list on load

    Conflicts with the Disable Gutenberg plugin.

    Filter when inserting pictures does not work properly

    WordPress keeps changing the markup and styles in and around the toolbar, and gives no thought to multiple plugins (like MLA) that add controls there. The width: 100% change was adapted from another popular plugin, Enhanced Media Library, and has been part of resolving the past issues.

    You wrote about a “break in the layout and gallery controls no longer being fully visible“. I cannot reproduce this on my system, but if you can give me more details or a screen shot I would like to try and find a fix that works for all users. There are several different ways to invoke the Media Modal popup window and perhaps your issue is one I just haven’t found yet.

    Thanks for your understanding and any additional information you can provide.

    Thread Starter brtech

    (@brtech)

    Hi,

    we’re using the WordPress theme Enfold and the issue was reported on (masonry) gallery popups.

    I took screenshots to show what’s happening:

    width: auto;
    https://ibb.co/zHvbLxN
    This is what we want to happen – I temporarily changed the plugin CSS to auto width so people can continue to work without the disturbance of the break.

    width: 100%;
    https://ibb.co/dgZbn7W
    This was the original code. With 100% width the sort-button is in the next line and the overlay gets longer – hiding most of the button for removing images. The overlay affects the first row of images, the rest is fine (there’s no sticky scrolling). However, it’s really tedious and borderline impossible to remove of the first row like this.

    Hope this gives you more to work with. If you need anything else, I’m happy to see what I can do to provide more context.

    Plugin Author David Lingren

    (@dglingren)

    Thanks for your update and for including the screen shots; very helpful.

    I do not see any MLA controls in either screen shot – do you have them enabled? Are you using them in other popup windows? You can try disabling them by unchecking the “Enable Media Manager Enhancements” and “Enable Media Grid Enhancements” boxes in the “Media Manager/Media Grid Enhancements” section of the Settings/Media Library Assistant General tab. Scroll to the bottom of the page and click “Save Changes” to save the new settings.

    The Enfold theme is a premium theme, and I hope you understand that I cannot afford to purchase premium themes and plugins simply to support my own free plugin. I will contact the theme developers to see if I can get a courtesy copy to investigate this issue further. Thanks for your understanding and your patience.

    Plugin Author David Lingren

    (@dglingren)

    The Enfold authors have given me a courtesy copy of their theme and I will see if I can reproduce and understand your issue. I am still interested in the answers to my earlier questions.

    Thanks for your patience while I investigate further.

    Thread Starter brtech

    (@brtech)

    Hi,

    thanks for the suggestion of disabling those settings. We had them both enabled and disabling “Enable Media Manager Enhancements” solved the issue and I could change the CSS back to it’s original state. (100% instead of auto)

    So the current settings of the MLA Enhancements are the following:
    https://ibb.co/f4BNd0d

    Plugin Author David Lingren

    (@dglingren)

    Thanks for your update with the good news that disabling the MLA Media Manager Enhancements was a useful workaround. I would still like to investigate the original problem and see if I can correct it.

    I have installed Enfold 4.8.7.1 and I am unable to reproduce the problem you reported. I don’t know my way around the theme, but here are the steps I followed:

    1. Selected the Portfolio Items admin screen.
    2. Clicked “Add New”.
    3. Clicked “Advanced Layout Editor”.
    4. Selected the “Media Elements” tab.
    5. Clicked “Masonry Gallery” element.
    6. Clicked “Masonry Gallery” in the element area.
    7. In the Masonry Gallery popup, Content tab, clicked “Add/Edit Gallery”.
    8. In the Add to Gallery popup, Media Library tab, selected a few images.
    9. In the Edit Gallery popup, clicked “Insert Gallery”.
    10. In the Masonry Gallery popup, Content tab, clicked “Save”.

    On my system the MLA enhanced controls are visible and the top row of image thumbnails is fully visible.

    If you can tell me how to reproduce the problem I can investigate further. Thanks for any help you can give me and for your interest in the plugin.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Popup toolbar width breaking layout’ is closed to new replies.