I am migrating my website’s index page to a LiveView. After setting the LiveView up, there are always empty info and error flash containers at the beginning of the page.
They reappear even after refreshing the browser. Clicking on the flashes does not close them.
It appears that you have a space character inside of the <p> tag in your rendered html. This causes the alert:empty pseudo-selector in app.css to fail, and it renders a live_flash bar with no content
What versions of Phoenix and LiveView are you using? Are you using the HEEx formatter (Can you run mix.format)?
For a quick-hack solution, you might be able to use
<%= if live_flash(@flash, :info) do %>
<%= live_flash(@flash, :info) %>
<% end %>
For anyone coming to this thread after Phoenix 1.7 has been released, a new approach to handle this is to add the phx-no-format attribute to the HTML element that you don’t want formatted in a way that changes significant whitespace. So for a default flash setup it’ll look like: