Removing white spaces in heex template

Hello
When I render this in heex template:

<.link
  navigate={object_route(object, @socket)}
  class="text-indigo-500 hover:text-indigo-600"
>
  <%= object.name %>
</.link>

I get this result in HTML:

<a ...> Object name </a>

How can I remove the whitespace in a tag? When I manually push everything to one line in template it works but heex formater moves it back to separate lines.

1 Like

Whitespace is not significant in HTML, can you elaborate on the issue you have?

“empty:hidden” Tailwind class won’t work!

As that link is not empty, because of added space!


I had the same issue with Phoenix 1.6.

The notification kept showing up, even if they were technically empty!

When I try to insert the above link in for loop like this:

<%= for {object, index} <- @objects |> Enum.with_index() do %>
  <%= if index > 0, do: "," %>
  <.link ...>
    <%= object.name %>
  </.link>
<% end %>

I get this rendered:
object1 , object2 , object3
I want result to be:
object1, object2, object3

1 Like

Try

display: inline-block;

To ignore spacing.

<%= Enum.map_join(@objects, & &1.name, ", ") %>

I want to create list of links with object names not list of object names

ah, ok… I misread the problem

Whitespace is largely ignored in HTML, but it can still be significant.

Extra spaces are collapsed into single spaces and can still appear at the beginning and ending of some nodes.

I think the formatter may require some additional tweaks?

5 Likes

There are some bug reports related to this already. I’m on mobile, so can’t find it immediately. But it would be good to report this as well.

Not sure if there’s a good fix possible because the whitespace situation in html is not trivial to solve.

1 Like

I fixed additional whitespace by putting everything in one line in the template and adding phx-no-format
according to docs: Phoenix.LiveView.HTMLFormatter — Phoenix LiveView v0.18.3

I haven’t used heex but I’ve used this in some other template engines. Bit stupid because it uses HTML comments to avoid whitespace but should work

<%= for {object, index} <- @objects |> Enum.with_index() do %><!--
  --><%= if index > 0, do: "," %><!--
   --><.link ...><!--
    --><%= object.name %><!--
   --></.link><!--
--><% end %>

Another way is to put everything on one line.

<%= for {object, index} <- @objects |> Enum.with_index() do %><%= if index > 0, do: "," %><.link ...><%= object.name %></.link><% end %>

That‘s also shown in the mentioned issue:

Generally many whitespace issues can be fixed with css as well. Flexbox for example makes whitespace insignificant.

2 Likes