CODEWITHSUNDEEP
angularjstwitter-bootstrapyeoman-generator
David Cruwys
David Cruwys

Reputation: 6872

Bootstrap Nav Dropdown not working with Yeoman Gulp-Angular

I have an Angular App built on top of Swiip/generator-gulp-angular and was attempting to add bootstrap nav dropdown menu and found it did not work.

I found a solution in this question Stack Overflow question: Bootstrap Dropdown menu is not working

enter image description here

What I would like to do is work out how to alter or configure the Yeoman Generator so that correct styles for dropdown menus are added in

<!doctype html>
<html ng-app="workibleWidget2">
  <head>
    <meta charset="utf-8">
    <title>workibleWidget2</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
    <!-- bower:css -->
    <!-- run `gulp inject` to automatically populate bower styles dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp/serve,src}) styles/app.css -->
    <!-- inject:css -->
    <!-- css files will be automatically insert here -->
    <!-- endinject -->
    <!-- endbuild -->

      <!-- ********** This FIXED the menu **********  -->
      <!-- Manually Adding this line has fixed the dropbdown, but now I'm not using the SASS driven bootstrap that comes with this project -->
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <!-- ********** This FIXED the menu **********  -->

  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ui-view></div>

    <!-- build:js(src) scripts/vendor.js -->
    <!-- bower:js -->
    <!-- run `gulp inject` to automatically populate bower script dependencies -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->

    <!-- inject:partials -->
    <!-- angular templates will be automatically converted in js and inserted here -->
    <!-- endinject -->
    <!-- endbuild -->

  </body>
</html>

Upvotes: 0

Views: 925

Answers (2)

Eduard Luca
Eduard Luca

Reputation: 6612

For people having the same issue, without having to use the official bootstrap JS, or add any custom JS, I've found a working version here:

<li class="dropdown" dropdown="">
    <a role="button" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
        Directives <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#accordion">Accordion</a></li>
        <li><a href="#alert">Alert</a></li>
        <li><a href="#buttons">Buttons</a></li>
        <li><a href="#carousel">Carousel</a></li>
        <li><a href="#collapse">Collapse</a></li>
        <li><a href="#datepicker">Datepicker</a></li>
        <li><a href="#dropdown">Dropdown</a></li>
        <li><a href="#modal">Modal</a></li>
        <li><a href="#pagination">Pagination</a></li>
        <li><a href="#popover">Popover</a></li>
        <li><a href="#progressbar">Progressbar</a></li>
        <li><a href="#rating">Rating</a></li>
        <li><a href="#tabs">Tabs</a></li>
        <li><a href="#timepicker">Timepicker</a></li>
        <li><a href="#tooltip">Tooltip</a></li>
        <li><a href="#typeahead">Typeahead</a></li>
    </ul>
</li>

Notice the dropdown="" on the li and the extra attributes on the a (dropdown toggle).

Edit: Just found out that this applies to old versions of UI-Bootstrap. Otherwise, the attributes prefixed with uib- should work.

Upvotes: 1

David Cruwys
David Cruwys

Reputation: 6872

On further investigation, I found out that the real issue is that navbars don't play that well in angular unless you add some custom code.

I had thought that navbar was natively handled in angular-bootstrap, that does not appear to be the case.

I ended up using this link to annotate my navbar and dropdowns with click events for open and close.

Twitter Bootstrap Navbar with Angular JS - Collapse not functioning

Upvotes: 0

Related Questions