Strange bug with line breaks in .html.leex

Phoenix Forum Questions / Help
, , ,
1

Hi friends, running into a weird bug when using a new live view project

in my live.html.leex file, if i format the code like so:

<main role="main" class="container">

  <p
    class="alert alert-info"
    role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"
  >
    <%= live_flash(@flash, :info) %>
  </p>

  <%= @inner_content %>
</main>

My alert box will render unconditionally (the blue box)

image
image945×223 19.5 KB

if I change the code back to the default formatting that came with the new project:

<main role="main" class="container">

  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info"><%= live_flash(@flash, :info) %></p>

  <%= @inner_content %>
</main>

the alert box disappears! :scream::astonished::exploding_head::money_with_wings:

image
image954×187 19 KB

very confused. If this is a bug, can somebody lead me to where I might report it?

I have tried this with both LF and CRLF set

the most minimal reproduction of this bug is putting a new line between the p tag and the <%= tag like so:

<main role="main" class="container">

  <p class="alert alert-info" role="alert"
    phx-click="lv:clear-flash"
    phx-value-key="info">
    <%= live_flash(@flash, :info) %></p>

  <%= @inner_content %>
</main>
2

with the help of somebody on slack, the mystery has been solved!

In the boilerplate CSS, the box is hidden if there is no content. A line break is considered content in DOM land.

if you run into this, just switch to conditionally rendering the alert boxes, or use a conditional css class (if you want fancy animations and such :sunglasses:)

2 Likes