Angular ui-bootstrap: dropdown not working with version 0.13.3

Question

I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:

<ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href='#' class="dropdown-toggle"><i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                        </li>
                    </ul>

But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that. Here's a common plunker.

But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?

Hi Pierre, I have added a plunker in the question. Can you please help there? — Tarun Dugar
– Tarun Dugar, Commented Sep 3, 2015 at 13:23
check now I was trying from the docs. Now you'll see the datepickers working properly, but the dropdown isn't. However, if you change the version to 0.11.0, the dropdown will start working but the datepicker would stop working. — Tarun Dugar
– Tarun Dugar, Commented Sep 3, 2015 at 13:36

Pierre-Alexandre Moller · Accepted Answer · 2015-09-03 13:45:47Z

3

To fix this, you have to use the directive dropdown, not only the class.

 <li class="dropdown" dropdown>
      <a class="dropdown-toggle" dropdown-toggle>
             <i class="fa fa-cogs"></i> Hi !
             <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
          <li><a href="settings">My Account</a></li>
          <!--   <li class="divider"></li> -->
          <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
       </ul>
 </li>

Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.

Working Plunker

answered Sep 3, 2015 at 13:45

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tarun Dugar Over a year ago

Yes, it seems 0.11.0 supports not adding a directive and works with just a class.

Pierre-Alexandre Moller Over a year ago

To be honest, I don't know the fact that it was even possible to use only the class.

Tarun Dugar Over a year ago

yes, its funny but it was working with just a class in the 0.11.0 version.

Tarun Dugar · Accepted Answer · 2015-09-03 13:46:29Z

As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:

<ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href='#' class="dropdown-toggle"><i class="fa fa-cogs"></i> Hi  !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                    </li>
                </ul>

to

<ul class="nav navbar-nav navbar-right">
                          <li dropdown>
                            <a href='#' dropdown-toggle><i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="settings">My Account</a></li>
                              <!--   <li class="divider"></li> -->
                                <li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
                            </ul>
                        </li>
                    </ul>

did the trick.

Collectives™ on Stack Overflow

Angular ui-bootstrap: dropdown not working with version 0.13.3

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related