@notifyCss make changes on my styles about laravel-notify HOT 28 CLOSED

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.

from laravel-notify.

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

from laravel-notify.

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.

from laravel-notify.

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

#38 (comment)

from laravel-notify.

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

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

from laravel-notify.

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

from laravel-notify.

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

from laravel-notify.

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

from laravel-notify.

Hi which version did you use currently?

from laravel-notify.

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

from laravel-notify.

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?

from laravel-notify.

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

from laravel-notify.

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

from laravel-notify.

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.

from laravel-notify.

Is anyone come up with any solution ?

from laravel-notify.

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

from laravel-notify.

+1 same here! still no solution?

from laravel-notify.

Waiting for the solution 🙇🏻

from laravel-notify.

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

from laravel-notify.

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

from laravel-notify.

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

from laravel-notify.

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.

from laravel-notify.

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

from laravel-notify.

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.

from laravel-notify.

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"

from laravel-notify.

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

from laravel-notify.

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!

from laravel-notify.

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

from laravel-notify.