I would like to have my notifications from notifyJS on top of a specified element (e.g. footer div). The notifications show up, but however, they do not stack if there is more than one notification at the same time. Though if I position the notifications to the global browser window, they do stack.
See the jsfiddle: http://jsfiddle.net/o59jrfh6/1/
As my footer is fixed to the bottom of my webapp, I could also use the gap attribute to modify the positioning (described here: http://notifyjs.com/), so that it looks like it stacks on top of the footer div. However, it does not work, the gap remains the same. I tried it like that:
$('.footer').notify("There was an error", { position: 'top center', className: 'error', gap: 10 });
If I cannot stack notifications on an element, how can I use the gap attribute proberly so it does at least look like its stacked on top of the footer div?
Okay, for clarification: The notifications do not stack, because it is not intented to do so if you place them next to an element. If you think about it, it is obvious that most people don't want that. Thus why it just replaces the last notification on that specific element.
Yet the gap attribute still does not work. So I just added custom css styles in my style.css which modifies the behavior of the notifiations.
I positioned the notifications bottom left and then added these styles to my css file:
.notifyjs-corner {
width: 99% !important;
margin: 17px !important;
}
.notifyjs-bootstrap-base {
text-align: center !important;
}
By increasing the margin of the notifyjs-corner the notification is now placed on top of my (fixed-size) footer. Also, by adding the width of 99%, its nearly full-size over the width of my page. Lastly, I added the text-align to have the notification text centered.