Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Bootstrap UI dropdown menu issue

    Sup guys,
    I'm developing my web application with Javascript with the support of Angular.js library. For the graphic interface I considered Bootstrap and even more Bootstrap UI/Angular UI the natural choice for the compatibility with Angular.js.

    I'm beginning to test the power of this system, and i would prefer not to use Jquery and Javascript plugins needed in Bootstrap: my policy is to use Bootstrap UI as much as I can, even more when standard Bootstrap library gives me unwanted behaviours.

    I tried to create an html with a dropdown, a functionality that, if using standard Bootstrap, requires js plugin.

    There are some examples of dropdown buttons, but I can't figure out how they work, and my tries never: the dropdown menu never get visible.

    This is my html page, I think maybe I'm missing some imports or stuff like that, try the page yourself...

    Code:
    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
      <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"> </script>
    </head>
    <body>
    
      <a class="btn dropdown-toggle">
        Click me for a dropdown, yo!
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li> 1 </li>
        <li> 2 </li>
        <li> 3 </li>
      </ul>
    </body>
    </html>
    This is the behaviour I'd like to have, and I can't understand why that example works fine.

    http://jsfiddle.net/guillaumebiton/hu78J/1/

    Thank you very much.

  • #2
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hi,

    You are missing several things from your html.

    There was an issue with the database the last time I tried to post so I am going to keep this as short as possible while explaining. I want to start off saying that I am no expert in in javascript or any of its frameworks but I can tell you what I've found from my tinkering.

    Anything I say that isn't required can be either omitted or you can add your own class to it for your styling. Omitting one of these items breaks the script.

    You need a container div <div ng-app>,
    In the example:
    <div class="container" ng-app>

    You also need a div with a class of dropdown and an ng-class= open open
    In the example:
    <div class="dropdown clearfix" ng-class="{open: open}">

    Your initial a link needs a class of dropdown-toggle and an ng-class = open=!open
    In the example:
    <a class="btn dropdown-toggle" href="#" ng-click="open=!open">

    With this stuff added in you will end up with:
    Code:
    <div class="container" ng-app>
    	<div class="dropdown clearfix" ng-class="{open: open}">	
    		<a class="btn dropdown-toggle" ng-click="open=!open"> Click me for a dropdown, yo! <b class="caret"></b></a>
    		<ul class="dropdown-menu">
    			<li> 1 </li>
    			<li> 2 </li>
    			<li> 3 </li>
    		</ul>
      </div>
      </div>
    I hope this helps.

  • Users who have thanked valandor062 for this post:

    yourveins (05-24-2013)

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you man, you've been very helpful


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •