Removing white spaces in heex template

Phoenix Forum Questions / Help
1

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
2

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

3

ā€œ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!

4

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
5

Try

display: inline-block;

To ignore spacing.

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

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

8

ah, okā€¦ I misread the problem

9

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?

7 Likes
10

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
11

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

2 Likes
12

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 %>
13

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.

3 Likes