QUESTION: How can I reposition alert and success banners to a different location than the top of the form?
LAYOUT: I have placed three buttons in a Grid (SUBMIT FOR REVIEW, SAVE & STAY, and COME BACK LATER). CSS is set and the grid floats perfectly down the page and hovers above their current location as the user scrolls and works on different sections of the form.
CONFLICTS: The first issue I noticed involved the SAVE & STAY button. When clicked, the success banner appeared behind the grid of the three buttons. Subsequent use of the other two save buttons failed and three errors, only resolved by a browser reload.
Next, I intentionally triggered an error and likewise the alert banner appeared behind the grid of three buttons.
When CSS positions the grid like so, the banners don’t resolve and go away, nor can I manually click the (x) to close the dialog:
/* 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: 90px; /* Distance from the bottom */
margin: 0 auto !important;
padding: 10px;
z-index: 1000; /* Higher value to stay above other elements */
max-width: 98% !important;
}
TROUBLESHOOTING: I experimented by targeting the self-start class, thinking if I could have the error or success banners popup mid page, that would solve the problem. When I did that, the banner did reposition but never resolved, nor could I manually click the (x) to close the dialog. The CSS below is one variation - I have tried many. The z-index is over-the-top but was something I tried to get at the (x) to close.
/* This is the box housing the alert. When the class is set as position: fixed, the banner does not clear; the built-in MS alert is "Oops..." but I have changed that with JavaScript to display "We have detected an error" */
.alert-body {
position: fixed; /* Keeps the dialog in a fixed position */
top: 600px !important; /* Distance from the top */
z-index: 5000 !important;
line-height: 50px !important;
height: 220px !important;
background-color: black !important;
width: 80% !important;
font-weight: bold !important;
font-size: 40px !important;
color: white !important; /* this defaults to orange if absent here + in alert-heading class */
}
RESOLUTION (but not the goal): The current status is that if I move the save buttons to the bottom via CSS, and remove the CSS overrides for the alert banners, they resolve as expected and I can manually close the dialog too with the (x).
