Extra Anchor tag inserted at the beginning (as a child for the first listed item)

Question

I have the following Rails Haml Code:

  %a.dropdown-toggle{ data: { toggle: "#{'dropdown'}"}, href: "#"}
    %span
      %i.glyphicon.glyphicon-filter
      Filter
      %i.icon-caret-down
    %ul.dropdown-menu
      %li.dropdown
        %a{:href => "#"}
          %input{:type => "checkbox", "ng-model" => "search", "ng-true-value" => "a", "ng-false-value" => ""}/
          %span.lbl a
      %li.dropdown
        %a{:href => "#"}
          %input{:type => "checkbox", "ng-model" => "search", "ng-true-value" => "b", "ng-false-value" => ""}/
          %span.lbl b
      %li.divider
      %li.dropdown
        %a{:href => "#"}
          %input{:type => "checkbox", "ng-model" => "search", "ng-true-value" => "c", "ng-false-value" => ""}/
          %span.lbl c
      %li.dropdown
        %a{:href => "#"}
          %input{:type => "checkbox", "ng-model" => "search", "ng-true-value" => "d", "ng-false-value" => ""}/
          %span.lbl d
      %li.dropdown
        %a{:href => "#"}
          %input{:type => "checkbox", "ng-model" => "search", "ng-true-value" => "e", "ng-false-value" => ""}/
          %span.lbl e
      %li.divider

I am using bootstrap v.3.2.0 with Rails. It seems that no matter what I do, there is always an extra anchor tag and placeholder inserted at the very beginning of the page when I am rendering this code.

I have attached an image of the result that I am getting. As you can see, there is always an extra gray bar at the very top before the first %a tag. I cannot seem to tell what is wrong.

When I inspect element on that extra line, I see that it is an extra empty anchor tag before the first %a in %li.dropdown:

<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
                    </a>

that I can delete from the DOM and the bar goes away. But I cannot seem to find where in my HAML code I am rendering this...

Any Ideas?

Answer 1

You should remove the outer most a tag. It doesn't make sense to have links inside another link. This should probably be a normal div tag. With haml that is just a dot and the classname: %a.dropdown-toggle becomes .dropdown-toggle.