twitter bootstrap - Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within it

Question

I'm using "Button dropdowns" from Twitter Bootstrap with HAML. In the Bootstrap docs I have found the example:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

I have tried rewrite it using HAML:

%div{:class => 'btn-group task_controller'}
  %a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
    %span{:class => 'caret'}
  %ul{:class => 'dropdown-menu'}
    %a{:class => 'close_task', :name => task.name, :href => '#' } Close        

But got the error message:

Haml::SyntaxError - Illegal nesting: content can't be both given on the same line as %a and nested within it.

So Bootstrap said me put the element inside -tag, but HAML didn't allow to do it. How can I fix the problem?

Answer 1

The problem is in these lines:

%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'} Action
  %span{:class => 'caret'}

The error message: content can't be both given on the same line as %a and nested within it refers to Action which is content “on the same line as %a”, and %span{:class => 'caret'}, which is content “nested within it”.

More generally, and perhaps easier to see, you can’t have something like this:

%tag Some content here
  And something here as well

The fix is to nest both under the %a:

%a{:class => 'btn-mini dropdown-toggle', "data-toggle" => 'dropdown', :href => '#'}
  Action
  %span{:class => 'caret'}

This gives the desired output:

<a class='btn-mini dropdown-toggle' data-toggle='dropdown' href='#'>
  Action
  <span class='caret'></span>
</a>