Error messages under ui-dialog
When filling a form in a ui-dialog popup, if any error, it will display the message in a popup under the ui-dialog like so :
Most of the time, there is a message in the form itself so it's not so bad but I noticed that it's not always the case (for example on a required custom fields with checkboxes, there is no highligh).
Manipuling z-index is not enough because ui-dialog and crm-notification-container is not at the same level in the html. I was able to solve the problem by moving crm-notification-container at the same level as ui-dialog (just under body) like so :
(function($) {
$(document).ajaxComplete(function( event, xhr, settings ) {
// move to body so that it goes on top of the ui-dialog
$('#crm-notification-container').appendTo('body');
});
})(CRM.$);
With the fix, it works although the css (shoreditch) is lost :
There might be a better way than doing this through javascript...