Closed andybroomfield closed 2 years ago
@andybroomfield I made my window bigger, which is OK on the iMac but not on my laptop. This needs a fix ideally
Yes, it's pretty frustrating. Zooming out helps.
I think this is the rationale for this issue, but not sure where it's at: https://github.com/localgovdrupal/localgov_subsites/issues/57
I looked at this a little previously.
It's quite similar to this issue (Layout Paragraphs started as a fork of Entity Reference Layout)
As comment 6 on there highlights, "The module adds the ui-dialog within the details wrapper." i.e. the modal dialog is stuck in a stacking context where merely changing the z-index doesn't help avoid the other elements on the page. Forcing the dialog to spawn in a different part of the page did correct the problem, but I didn't find the right combination [yet] to stop it messing up the positioning of the "add paragraph" popup...
I think that issue is related to this Vertical Tabs Overflow one.
I solved it with jQuery. If one of the Javascript wizards can convert this to vanillia javascript.
/**
* @file
* Fix layout paragrpahs in Gin.
*/
(function ($, Drupal) {
// Attach after an ajax refresh
Drupal.behaviors.bhcc_fix_layout_paragraphs = {
attach: function(context, settings) {
$('.ui-dialog.layout-paragraphs-dialog', context).each(function() {
var base_form = $(this).closest('form');
var overlay = $('.ui-widget-overlay.ui-front');
var base_field = $(this).closest('.field--type-entity-reference-revisions');
var placeholder = $('<div>', {
class: 'js-layout-paragraph-base-field-placeholder',
});
if (!$(this).hasClass('js-modal-moved')) {
// Add the placeholder so the field can be moved back.
base_field.before(placeholder);
// Move the overlay and the base field.
overlay.appendTo(base_form);
base_field.appendTo(base_form);
$(this).addClass('js-modal-moved');
// When modal is removed, move the base field back.
$(this).on('remove', function() {
placeholder.replaceWith(base_field);
});
}
});
}
}
})(jQuery, Drupal);
@andybroomfield
I can convert that. Where did you put it, in a custom module, or a fork of the gin theme, or somewhere else?
@markconroy Thanks, its a very quick and dirty custom module. Open to how this should be done the proper way and if it should feedback to Gin developers.
Did this get added anywhere? Checking if still a live issue, or should we make the module I wrote to fix it more widley avalible?
I started working on it before Christmas but only had an hour or two.
I'll try get back to it tomorrow. I'm creating a custom module for it but I think it might be best placed in localgov_core.module and then ripped out when not needed. A custom module might be overkill.
Hi @andybroomfield
I have this rewritten in vanilla JS and saved in a custom "theme improvements" module to try make it generic (and so we can use the same module for other theme fixes if we ever need them.
Can you have a little test of this and see if you think it's okay to propose to become part of localgov_core or somewhere else?
Hi @markconroy I've tested this and it works great, thanks.
No probs this being part of Localgov_core (as a submodule I guess). Would we consider sending this upstream to layout paragraphs or gin?
Should we check that Gin is the admin theme before enabling it?
Discussing this in Merge Monday: where this should live.
Possibilities: localgov_core? localgov profile? a separate module?
Is this specific to Gin? Claro?
Perhaps a sub-module of the profile or localgov_core https://github.com/localgovdrupal/localgov_core/tree/2.x/modules
Suggestion is to place this as a sub-module in localgov_core, we can then all move it later if needed.
Let's close this, in favour of this https://github.com/localgovdrupal/localgov_core/pull/119
Trying to edit and add new page builder layouts or existing paragraphs and the modal goes off the page.
How are people solving this on existing sites?