ocolot
ocolot

Reputation: 728

How to nest elements within %a tag?

I would like to wrap an event div in a %a tag to make the whole clickable.

This block:

= link_to event_path(event.id) do
    .flipper
        .event-inner
            ...

Compiles to:

<div class="event-container flip-container" ontouchstart="this.classList.toggle('hover');">
    <a href="/events/21"></a>
    <div class="flipper">
        <a href="/events/21"></a>
            <div class="event-inner"><a href="/events/21"></a>            
                ...

How could I get a unique %a wrapping the whole?

Upvotes: 2

Views: 1485

Answers (2)

ocolot
ocolot

Reputation: 728

It seems that haml don't compile well nested blocks. Especially, I had helper blocks within .event-inner.

The solution I found is switching to slim that manage this well. Furthermore, it seems to compile 2 times faster and it exists haml to slim converters.

Upvotes: 1

R Milushev
R Milushev

Reputation: 4315

Watch out for indentation in HAML :

= link_to(event_path(event.id)) do 
  .flipper
    .event-inner
      your_code_here

Upvotes: 2

Related Questions