Search code examples
elixirphoenix-frameworkphoenix-live-view

Problem rendering a space inside a phoenix template

I was giving a try to Phoenix Live View building a basic chat when I found a strange behaviour. Probably due to my lack of knowledge about Phoenix templates...

When trying to assign dynamically a CSS class to a component, making use of <%= if _, do: _, else: _ =>:

<div class=<%= if msg.user == @user, do: "msg local-user", else: "msg other-user" %>>

The problem is that this is rendered to <div class"msg" local-user""> instead of <div class="msg local-user">

Solution

  • You need to have double-quotes in the HTML (i.e. outside of the EEx syntax), like this:

    <div class="<%= if msg.user == @user, do: "msg local-user", else: "msg other-user" %>">