Avoid having to double-click to toggle Bootstrap dropdown

javascript css angularjs twitter-bootstrap angular-ui-bootstrap
Jago picture Jago · Jun 14, 2014 · Viewed 44.3k times · Source

I am using a Bootstrap dropdown menu. The problem is that it never drops down upon the first click; I need to click 2 times for it to be toggled. I guess the click event is somehow getting stuck somewhere before propagating down...

Is there any way to fix that?

Answer

minni picture minni · Aug 15, 2014

If someone is using angular with ui-bootstrap module along with normal bootstrap HTML dropdown definition, there are also two clicks needed.

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=> Removing the data-toggle="dropdown" will fix the issue.

Opening the dropdown with one click will work after this.

Reference: https://github.com/angular-ui/bootstrap/issues/2294

Related questions

Angularjs toggle div visibility

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here <button ng-click="toggle()">test</…

Read More
CSS: Change parent on focus of child

Let's say you have something like: <div class="parent"> <input class="childInput" type="text" /> <div class="sibling"></div> </div> I want to change the appearance of the parent/siblings when …

Read More
How to color row on specific value in angular-ui-grid?

I'm trying to color a row depending on it's value in the new angular-ui-grid 3.0 rc12 but I haven't been able to. The following code used to work in the previous version (ngGrid): $scope.gridOptions = data: 'data.sites' tabIndex: -1 enableSorting: …

Read More