SUCCESS:
JavaScript:
////>>>>>>>>>>>>>> Manage the alert and save button grid spacing
fd.spRendered(function() {
function adjustButtonsForAlert() {
const alert = document.querySelector('.alert-body');
const buttons = document.querySelector('.grid-button-float');
if (!buttons) return;
if (alert) {
const alertHeight = alert.offsetHeight;
buttons.style.top = (alertHeight + 30) + 'px';
} else {
buttons.style.top = '105px'; // your normal position
}
}
// run once on load
setTimeout(adjustButtonsForAlert, 20);
// run again whenever DOM changes
const observer = new MutationObserver(adjustButtonsForAlert);
observer.observe(document.body, { childList: true, subtree: true });
});
CSS:
/* This is the box housing the alert: "We have detected an error" and if set as fixed does not clear; the built-in MS alert is Oops...but changed with JavaScript */
.alert-body {
padding: 14px 20px !important; /* inset padding */
background: black !important;
color: white !important;
line-height: 1.35 !important;
border-radius: 4px !important;
position: relative !important;
z-index: 5000 !important; /* ABOVE your fixed buttons */
font-size: 25px !important;
}
/* This is the box housing the alert: "We have detected an error" and if alert-body is set as position: fixed, the banner remains viewable; the built-in MS alert is Oops...but changed with JavaScript */
.alert-heading {
margin: 0 0 6px 0 !important;
color: white !important;
}
.alert-body .close {
top: 8px !important;
right: 10px !important;
z-index: 6000 !important;
}
/* This grid houses the three save buttons and is defined in the GRID CELL class field */
.grid-button-float {
position: fixed; /* Keeps the dialog in a fixed position */
top: 105px;/* Distance from the bottom, originally had a value of 90, but testing alts to clear alert banner */
margin: 0 auto !important;
padding: 10px;
border-radius: 5px;
z-index: 1000; /* Higher value to stay above other elements */
max-width: 98% !important;
}
The alert banner hides the save buttons until scroll or resolution. That works for me!