Search code examples
htmlslim-lang

Displaying sequential if's with Slim

I have the following paragraph that I'd like to display, depending on what customer information is available

p 
  ' Products and services are provided by #{link.company_name}
  - if link.support_email.present?
      div Email: #{mail_to link.support_email}
  - if link.support_phone.present?
      div Phone: #{link.support_phone}

I'm trying to figure out how to use conditionals to properly display these items sequentially ..

The snippet I've shared above does NOT work .. the nesting is broken, so I get: 

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

instead of:

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

Help?

Solution

  • It's actually not a Slim issue. It's simply an HTML limitation.

    According to the HTML spec, a p element "cannot contain block-level elements".

    You can read more about it in this section of the spec: https://www.w3.org/TR/html401/struct/text.html#h-9.3.1