@notifyCss make changes on my styles

[donchoborisov]

When i add @notifyCss to my head its make changes to my styles actually changes are on the pictures. Can you please help me ?

[mckenziearts]

Hi which version did you use currently?

[donchoborisov]

not sure i just follow the instructions. everything else works fine. I think is the last verison 2.0

[larsvg]

Same problem on my end. I updated to v2.0 because v1.* broke the laravel 8 update. But now Tailwind takes over my Bootstrap application. h1 tags, links etc. are all normalized.

Is it possible to have a laravel 8 compatible version of the v1 branch?

[donchoborisov]

I manage to solve the problem with custom css directly in the elements but that shouldn't be the case...

[ramonpego]

the same happened here, i had to make changes in almost all my projects. Sometimes my project's css break the notification, sometimes the notification css break my site style

[kgp43]

Same here

Using a basic Bootstrap4 template and it changes my h1 tags (removes the styling completely).

I can use the Dark Theme, but it will not position bottom-right and it does not auto-close (i need to manually close by clicking the cross).

Using latest version (as of today) - followed the installation guide.

[donchoborisov]

Is anyone come up with any solution ?

[matthbon]

Is there already a solution for this? I also have the same problem that is changes my own styles

[Spillo17]

+1 same here! still no solution?

[bigint]

Waiting for the solution 🙇🏻

[muhsinzyne]

any solution. i am using laravel 7 with ubold theme purchased

[colinbarstow]

I am also experiencing the same issues, has anyone found a work around that doesn't involve completely modifying my existing css files?

[VinceGee]

Waiting for solution...which CSS files are you modifying for it to work?

[mwamodo]

I think this affects bootstrap. If this happens with tailwind you could just remove the notifyCss directive and it would still work. A solution would be to prefix notifycss class names.

[zainiafzan]

Hi have this issues too.. I use tailwind. after I remove line 3 on notify.css in vendor publish it works..

[MarouanAfkir]

I think putting the @notifyCss before any other css links would solve your problem

[haexperts2020]

I am surprised this has gone on so long. Well here is my solution:

https://jsfiddle.net/qct52djv/

Basically took the stock css file and remove everything related to body, html, etc classes. Only thing I kept was the button classes for the "x" on the notification. Hope this helps someone as this was frustrating for me also.

Just remove @notifyCss and add your custom css style sheet.

[boritopalito]

I am surprised this has gone on so long. Well here is my solution:

https://jsfiddle.net/qct52djv/

Basically took the stock css file and remove everything related to body, html, etc classes. Only thing I kept was the button classes for the "x" on the notification. Hope this helps someone as this was frustrating for me also.

Just remove @notifyCss and add your custom css style sheet.

Thank you very much. This is a working solution for me.

[MarJose123]

any solution? or workaround? I have the same issues but for me, it goes behind my form or navbar.

I'm using bootstrap 4 with argon.

[p1xel007]

The issue is because this package used "tailwindcss" for some or most of the css styles, and the styles are overriding the other css styles.

You can just add ".notify" before all the css classes that's conflicting with your styles in "vendor\mckenziearts\laravel-notify\css\notify.css"

[kgnfth]

still no fix Time to run composer remove mckenziearts/laravel-notify

[haexperts2020]

Just remove the stock CSS and copy and paste this one:

https://github.com/mckenziearts/laravel-notify/issues/38#issuecomment-929398051

[MarJose123]

I created a similar repo and did a refactor to use Boostrap.

https://github.com/whoami213/laravel-bootstrap-notify

[JoJo-Bear]

Our project was affected by this too. It appeared to be the Tailwinds Preflight option. I've submitted this PR #93 which should prevent the styling issues

[mbia1378]

Add this in your custom styles file

.inset-0 { z-index: 9999; margin-left: 950px; margin-top: 65px; }

@media only screen and (max-width: 600px) { .inset-0 { z-index: 9999; } }

[damms005]

I created a fork that fixes collision with Alpine JS and all other possible style issues.

I also updated the readme to make it easier to use this package, so that you won't have Javascript/CSS conflicts anymore.

For now, you simply use the fork by updating the repositories section of your composer.json file like so (or add it):

{
   "repositories": {
       ...
        "laravel-notify": {
            "type": "vcs",
            "url": "https://github.com/damms005/laravel-notify"
        }
    }
}

Hopefully, @mckenziearts will approve that I submit it as PR or effect my changes into this original package. Else, if people keep having these issues I may just make the new fork into its own new separate package and continue to try and maintain it and make friendlier to use, because IMHO, this package is too awesome to have such a poor DX.

The authors have done an outstanding job and kudos to them!

[ashari0831]

I put the @notifyCss before other links in my head tag. that works for me.

[hen8y]

Put the @notifyCss before every other css tags and you're good to go