Alert area box visible when alert is not active

[kps1ny]

Hi - thanks for this Vue component.

It's working well on my site to show alerts, but there seems to be a small issue with CSS as shown in the attached image.

Specifically, there's a subtle blocked area appearing where the alert is set to show up when activated. This area moves around when positioning the alert to appear at the top left, bottom right, etc.

Any ideas how to get rid of it?

My code:
<vs-notify group="alert" position="bottom right" :duration="6000"></vs-notify>

this.$notify("alert", response.body.ErrorMessage, "error");

I've not tried to adjust styling on the notify element at all.

-Ken

[NxtChg]

You probably modified CSS on 'div' element? This is not advisable, all custom styles should only modify classes, not raw elements, as this can cause problems.

I suggest either fixing your styles, or clearing them manually for 'vs-notify' class, for example:

.vs-notify{ border:none; }

[kps1ny]

Thanks for the reply.

It turns out that the subtle box was a result of Bootstrap's CSS because group="alert" adds the class .alert to the notification area and Bootstrap's styling that class.

Changing the group value to some other string that otherwise has no class, and then changing this.$notify to use that same string, resolved this and the box disappeared.

-Ken