notifyJS:元素通知不堆叠 [英] notifyJS: Element notifications do not stack

问题描述

我希望来自notifyJS的通知位于指定元素(例如footer div)的顶部.会显示这些通知，但是，如果同时存在多个通知，它们不会堆叠.尽管如果将通知放置在全局浏览器窗口中，它们也会堆叠.

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.

请参阅jsfiddle: http://jsfiddle.net/o59jrfh6/1/

See the jsfiddle: http://jsfiddle.net/o59jrfh6/1/

由于页脚固定在Web应用程序的底部，因此我还可以使用 gap 属性修改位置(此处描述:

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 });

如果我不能在元素上堆叠通知，我该如何探究地使用 gap 属性，使其至少看起来像是堆叠在页脚div上?

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.

但是，gap属性仍然不起作用.因此，我只是在style.css中添加了自定义CSS样式，以修改通知的行为.

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.

我将通知放置在底部左处，然后将以下样式添加到我的css文件中:

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;
}

通过增加notifyjs-corner的边距，通知现在放在我的(固定大小)页脚顶部.此外，通过添加99％的宽度，其宽度几乎可以覆盖我页面的整个宽度.最后，我添加了text-align以使通知文本居中.

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.

这篇关于notifyJS:元素通知不堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！