rails haml span is being ended "early" - why?

Question

Why is my 'footer_links' span getting ended early (before my delete button_to) with this:

%p
  %br
  %span.footer_links
    = link_to 'Edit', edit_link_path(@link)
    |
    = button_to 'Delete', @link, :confirm => 'Are you sure?', :method => :delete

is producing this:

<p>
<br/>
<span class="footer_links">
<a href="/links/354/edit">
<a href="/links/354/edit">
 | 
</span>
</p>
<form method="post" action="/links/354" class="button_to">
<div>
<input name="_method" type="hidden" value="delete"/>
<input data-confirm="Are you sure?" type="submit" value="Delete"/>
<input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
</div>
</form>

How are you viewing this source? Are you viewing the raw source or are you looking at the DOM using the developer tools? They're not the same. If you're looking at the DOM, then the answer by mu is too short is correct. — Rob Davis, Jun 01 '12 at 02:43
I had the same problem some time ago and it was a bug in haml. Do you use the most recent version? — BvuRVKyUVlViVIc7, Jun 01 '12 at 11:10

Rob Davis · Accepted Answer · 2012-06-01T02:53:23.243

Building on the answer by "mu is too short", change your p and span elements to div (or something else that's valid HTML):

%div
  %br
  .footer_links
    = link_to 'Edit', root_path
    |
    = button_to 'Delete', current_user, :confirm => 'Are you sure?', :method => :delete

I'm guessing that you got that "source" from the Elements (aka DOM) browser in your Chrome (or Safari or Firefox/Firebug) developer tools. That's not the same thing as looking at the raw source rendered by HAML. The browser parses your (invalid) source, it tries to build the best DOM it can out of it, and when you browse the DOM, the developer console will dump it out as text.

That textual representation in the developer console will rarely be the same as the raw source, especially if your source is invalid. When you're trying to debug rendering errors, don't stare through so many layers of gauze. Choose "View Source" from the browser's menu.

score 3 · Answer 2 · edited May 23 '17 at 12:20

I'm guessing that your HAML is actually producing something like this:

<p>
  <br/>
  <span class="footer_links">
    <a href="/links/354/edit">...</a>
     | 
    <form method="post" action="/links/354" class="button_to">
      <div>
        <input name="_method" type="hidden" value="delete"/>
        <input data-confirm="Are you sure?" type="submit" value="Delete"/>
        <input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
      </div>
    </form>
  </span>
</p>

But that's not valid HTML: you cannot put a <div> (or <form>) inside a <p>. So, when the browser is trying to parse the HTML, it notices that it isn't valid HTML and does its best to correct your HTML. The easiest correction would be to push the offending <form> element outside the <p> and close the <span> and <p> elements along the way, that would yield a (valid HTML) structure like this:

<p>...</p>
<form><div>...</div></form>

and that looks suspiciously like what you're seeing.

The solution is to use valid HTML, perhaps you could use <div class="p"> instead of the outermost <p> and adjust the CSS to make div.p look like p. You'll also have to replace the <span> since <span> can only contain phrasing content just like <p>.

Thanks but the problem seems to have that the footer_links span is ending early and I've checked for tabs (no) so I don't know why. — Michael Durrant, Jun 01 '12 at 02:09
@MichaelDurrant: The `` has to be closed so that the `
` can be pushed out of the ``, then the `
` has to be closed so that the `
` can be pushed out of the `
`. The browser won't let you put a `
` inside a `` or a `
` since `
` is not a phrasing element. — mu is too short, Jun 01 '12 at 02:15

score 0 · Answer 3 · answered Jun 01 '12 at 01:20

0

Totally a guess, but did you mix spaces and tabs in your indentation? It looks like HAML is interpreting the button_to tag as being indented at the same level as the %p tag, so I'm wondering if there's a tab that might be getting interpreted as a space.

The HAML documentation says you can't mix tabs and spaces in your indentation but it doesn't say whether this throws an error or shows up as unexpected behavior.

answered Jun 01 '12 at 01:20

Mark Westling

5,904
4
26
30

Thanks for checking, Michael. I started to delete my answer after reading your reply but decided to leave it up in case someone else goes down the same (incorrect) path. – Mark Westling Jun 01 '12 at 02:34

rails haml span is being ended "early" - why?

3 Answers3