I am trying to style Alert messages in my project. For success messages, I would like the background of the message to be green. But what happens is, the background green stays on the page like it s fixed. I want that background only when the alert message is returned.
I know it has been a while and maybe no longer relevant. But maybe someone else will stumble upon this post. I guess the issue here is the default styling which is still applied.
Phoenix LiveView comes with a clever CSS rule
This works quite well as long as you use their default markup. The moment you add DOM elements to the default <p> tag, it is no longer empty. Therefore, the browser wont hide it and you see an empty green tag.
I am not sure if there is a better way, but @polygonpusher 's solution should work.