Anchor instance inserted at the beginning (as a child of the first item listed)

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 additional anchor tag and placeholder inserted at the very beginning of the page when I execute this code.

I attached the image of the result that I get. As you can see, there is always an extra gray bar at the very top before the first% tag. I can’t say what is wrong.

When I check the element on this extra line, I see that it is an additional 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> 

which I can remove from the DOM, and the panel leaves. But I can not find where in my HAML code I am doing this ...

Any ideas?

Answer 1

You must remove the outer tag a . It makes no sense to have links inside another link. This should probably be a regular div tag. With haml, which is just the point and class name: %a.dropdown-toggle becomes .dropdown-toggle .

Answer 2

For the start tag of the binding, this is possible because you gave this line href. %a.dropdown-toggle{ data: { toggle: "#{'dropdown'}"}, href: "#"}

Try to remove href.

And I would suggest that where you have: %li.divider where the lines are displayed.