Removes unnecessary selector
authorNicol <vingle@users.noreply.github.com>
Fri, 27 Aug 2021 10:47:06 +0000 (12:47 +0200)
committerNicol <vingle@users.noreply.github.com>
Fri, 27 Aug 2021 14:32:29 +0000 (16:32 +0200)
Fixes issues with modals in Joomla 4

As described here: https://lab.civicrm.org/dev/joomla/-/issues/19 - J4 Civi modals had a number of issues making them unusable. For admin/backend Civi pages, this puts the tinted overlay behind the modal and brings the modal in front of the menubar. It makes the modal clickable, removes the narrow width and ensures scrolling.

css/joomla.css

index 87d333b4ac4393648ee97ec00002eece8f7cb6d8..a5dda386f240e0c49690c98ecf98698d687df9d1 100644 (file)
@@ -413,3 +413,22 @@ body.admin.com_civicrm.layout-default #subhead {
 body.admin.com_civicrm.layout-default .crm-container .crm-dashlet {
        max-width: 50vw; /* fixes over-wide news dashlet */ 
 }
+
+/* J4 Modals */
+
+body.admin.com_civicrm.layout-default .crm-container.ui-dialog.ui-resizable {
+       z-index: 1021;
+}
+
+body.admin.com_civicrm.layout-default .ui-widget-overlay {
+       z-index: 1;
+}
+
+body.admin.com_civicrm.layout-default .crm-container .modal-dialog {
+       max-width: inherit;
+       padding: 0;
+       margin: 0;
+       overflow: scroll;
+       pointer-events: all;
+}
+