alsaraha
Hide flash element if there is none?
The default template in the app.html.heex file is
<main class="container">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</main>
but what if I want to put something else other than the p element like a group of elements and icons, how do I hide the element in case there is no flash alert?
Marked As Solved
chrismccord
# <.flash kind={:info} flash={@flash} />
# <.flash kind={:error} flash={@flash} />
def flash(%{kind: :info} = assigns) do
~H"""
<%= if live_flash(@flash, @kind) do %>
<div>...
<% end %>
"""
end
Also Liked
LostKobrakai
I’d just not render anything if there’s no flash message to show. Imo the p:empty css phoenix uses is a clever way to handle no alerts, but also a bit to clever one.
I usually change this to something like this:
<%= for type <- [:info, :error], flash = get_flash(@conn, type) do %>
…
<% end %>
kif
It is clever but it brakes if you use mix format because it transform it into
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
</p>
instead of one line. Making p:empty selector to fail.
LostKobrakai
That’s what I mean by “to clever”. It’s just to fragile, now even more with the formatter breaking it even automatically.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"