rails - haml child elements render outside parent element

Question

I am trying to render the following line of code in haml

%p.article-body
  lorem
  = "<div>ipsum</div>".html_safe

I intend it to render as

<p class="article-body">
  lorem
  <div>ipsum</div>
</p>

But instead it renders as

<p class="article-body">
  lorem
</p>
<div>ipsum</div>

What am I doing wrong? It only happens to those lines with call to html_safe. Otherwise, the contents will render inside the parent element.

score 0 · Answer 1 · answered Apr 15 '15 at 12:28

0

As HAML is indentation sensitive markup, you need to have proper indentation. Try this:

%p.article-body
  = "<div>lorem</div>".html_safe

answered Apr 15 '15 at 12:28

RAJ

I tried this but the line with `html_safe` call still renders outside the parent element. It works for those without the `html_safe`. – Martin Verdejo Apr 15 '15 at 13:37

score 0 · Answer 2 · answered Apr 15 '15 at 12:37

0

check your indentation. Please change the code like this

%p.article-body
  %div lorem

answered Apr 15 '15 at 12:37

Jyothu

I am actually calling html_safe on a field so the contents of `%p.article-body` will have to be dynamic. I do not plan to hard code the div tag. I tried the indentation but again, those with `html_safe` get rendered outside the element. – Martin Verdejo Apr 15 '15 at 13:47

score 0 · Answer 3 · answered Apr 15 '15 at 12:58

0

Use this code:

%p.article-body

%div lorem.html_safe

answered Apr 15 '15 at 12:58

Uday kumar das

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

%p.article-body= "lorem".html_safe

This is wrong syntax. As <p> tag not allowed to contain <div> tag.

Try <div> tag(by removing %p) instead <p> like this:

.article-body
  = "<div>lorem</div>".html_safe

OR

.article-body
  != "<div>lorem</div>"  # if you not wanted to use .html_safe

plz check this for more details about != :

For more Info / Learn HAML structure refer below links:

I hope this may helps you. :)

edited May 23 '17 at 11:43

Community

answered Apr 15 '15 at 13:08

Gagan Gami

Thanks for the links, I'm really new to haml. I tried the indentation fix but the lines with html_safe call still renders outside the parent element. It works for those without the html_safe. – Martin Verdejo Apr 15 '15 at 13:39
@MartinVerdejo : try `!= "
lorem
"` without html_safe and let me know so I can update my answer accordingly – Gagan Gami Apr 15 '15 at 14:30
still no luck using the `!= "
lorem
"` – Martin Verdejo Apr 15 '15 at 14:35
Yeah! Firgured it out as well. Thanks will accept your answer! – Martin Verdejo Apr 16 '15 at 02:37

4 Answers4