Ways to avoid unwanted whitespace in Phoenix templates?

Phoenix Forum Questions / Help
, ,
1

I’m generating breadcrumbs in my Phoenix template and the result when I keep the code clean (across many lines and indented) is extra white space and line breaks. This has an adverse effect on the HTML being rendered (extra spaces in front of the crumb text). I can “fix” the issue by compacting my Phoenix template code to a long one liner but this doesn’t feel very elegant. Any other suggestions?

<%= for crumb_info <- @crumbs do %>
	<%= if crumb_info == List.last(@crumbs) do %>
		<li class="breadcrumb-item active" aria-current="page">
	<% else %>
		<li class="breadcrumb-item">
	<% end %>

	<%= if Keyword.has_key?(crumb_info, :link) do %>
		<%= link crumb_info[:title], to: crumb_info[:link] %>
	<% else %>
		<%= crumb_info[:title] %>
	<% end %>

	</li>
<% end %>
2

You can use -%> to “collapse” following whitespace when closing.

2 Likes
3 
def build_breadcrumb(crumbs) do
  for crumb_info <- crumbs do
    active_class = if crumb_info == List.last(crumbs), do: "active", else: ""

    text = 
      if Keyword.has_key?(crumb_info, :link) do
        link(crumb_info[:title], to: crumb_info[:link])
      else
        crumb_info[:title]
      end
   
    content_tag(:li, text, class: "breadcrumb-item #{active_class}")
  end
end

Also there are ways n CSS to not render whitespace. E.g. using display: flex.

2 Likes
4

This doesn’t work. Getting syntax errors with the latest versions.

5

Same here. In my case I render into text/plain and want to prevent conditionals like <%= if @my_condition do %> from rendering as empty lines, breaking the output formatting.