Contrib.social

CSS issues after update

Open on Drupal.org →
Created on 29 September 2023, 9 months ago
Updated 2 October 2023, 9 months ago

I am currently updating modules to prepare for the overall Drupal 10 upgrade, and after updating Modal Page from 4.x to 5.0.6, I've found that the modals on my site are now placed oddly. They appear shifted up several pixels, to the point where the top several lines of the modal are not visible on the screen. I tracked down the changes to this issue: #3165757: Move JS, CSS, Templates, Libraries, Helpers to new Project → , which appears to have added the following CSS:

.modal.fade .modal-dialog {
  ...
  transform: translate(0, -25%);
}

This seems to be what is causing the repositioning of the modals on my site. This could be an odd combination of my custom theme, and this module's CSS, as I don't see anybody else complaining of the problem. But it's also not clear to me what purpose this is supposed to serve. My best guess is that something should be removing the ".fade" class from the parent element, removing this style by changing the selector, and that step isn't happening?

Additionally, the "OK" button to dismiss the modal no longer works, and there is also a new "Close" button that is hanging on the bottom, but not inside the modal.

Any advice is appreciated. Feel free to change this to a support request if I'm not doing something correctly.

🐛 Bug report
Status

Needs review

Version

5.0

Component

Code

Created by

🇺🇸United States bburg Washington D.C.

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bburg
  • Comment 9 months ago →
    🇺🇸United States bburg Washington D.C.
  • Comment 9 months ago →
    🇺🇸United States bburg Washington D.C.

    This might be a whole other issue, but looking at the modal-page.js code, I see that I end up with duplicate event listeners on the OK button. This should probably be wrapped in a "once" to prevent multiple even listeners from being attached to the same elements.

  • Comment 9 months ago →
    🇺🇸United States bburg Washington D.C.

    For the OK, button, this module is using modal.modal('hide');

    The current jquery modal documentation suggests using $.modal.close();, which appears to work as expected.

  • Comment 9 months ago →
    🇺🇸United States bburg Washington D.C.

    Attached patch can be applied to 5.0.6 (apologies, I know there are some changes in the current dev, which I realized after the fact).

    It uses once to avoid attaching duplicate event handlers, and changes the call to close the modal.

  • Status changed to Needs review 9 months ago
  • Comment 9 months ago →
    🇧🇷Brazil RenatoG Campinas

    Thanks for the patch @bburg

    Moving to Needs Review to test that and commit into 5.x branch

    Appreciate

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024