I am developing my first App with AngularJS. I am trying to create a Dropdown menu, but unable to bring it under control. Here is the html:
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
This does give me the desired output as shown below:
but the dropdown is always open, instead of toggling.
Can someone please advise what I am doing wrong?
======= Here are the header files =========
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="dist/css/mobile-angular-ui-base.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="dist/js/mobile-angular-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Required to use $swipe, $drag and Translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
<script type="text/javascript" src="app.js"></script>
The answer on your question is using last versions of Angular+jQuery+Bootstrap+Angular UI.
Related
I have created my website in Laravel 5 with template integrated in it. Now I want to add chat feature in my website, so I decided to use Vue.js. The problem is that when I setup Vue.js in my project, the page template of that page in which vue.js is used is not working. I mean that all the css and js file of laravel getting mess up. Page looks horrible.
How Can I use my existing template with Vue.js?
<head>
<link rel="stylesheet" href="{{ URL('css/style.css?version=2') }}" />
<link rel="stylesheet" href="{{ URL::asset('css/ionicons.min.css') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="Conversation" />
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</div>
</div>
<div id="app">
<example-component></example-component>
</div>
<div class="dropdown all_conversation">
<button class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-weixin" aria-hidden="true"></i>
All Conversations
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li> All Conversation <ul class="sub_menu_ list-unstyled">
<li> All Conversation </li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
Console warnings and errors
I am trying to follow bootstrap button drop down , but not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div class="dropdown" style="display: block;">
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Edit:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Components Tutorial</title>
</head>
<body>
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
</body>
</html>
Aside from the missing > if not a typo, you are not including the dropdown button to toggle the menu.
e.g.
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
So putting that on your current code:
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Walter</li>
<li>Bunny</li>
<li>Big Lewaoaski</li>
</ul>
</div>
Example Fiddle
Dropdown closes after every mouse click. The dropdown should close only after hitting the "Close (X)" button. How can I do that?
Plunk:
http://plnkr.co/edit/7mcBoyfbrT3FNl2vJLjh?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</body>
</html>
If you want to do this in native bootstrap then this answer is right.
But, I would recommend you using angular ui bootstrap (https://angular-ui.github.io/bootstrap/). as, you are using angular.js(in plunker) and angular ui bootstrap provides all bootstrap components as directives. and you won't have to write angular wrapper around native bootstrap components.
Luckily, dropdown in angular ui bootstrap provides option for auto-close which you can set to outsideClick so it won't close when you click inside inside dropdown.
Angular UI Bootstrap Dropdown Docs
See the working example below.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctrl', function($scope) {
$scope.closeDropDown = function() {
$scope.isopen = false;
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div class="btn-group" dropdown is-open="isopen" auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
Options <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
<ul>
<label class="checkbox">
<input type="checkbox">Open
</label>
</ul>
<ul>
<label class="checkbox">
<input type="checkbox">Close
</label>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>
<button type="button" ng-click="closeDropDown()">Close (X)</button>
</li>
</ul>
</div>
</div>
</div>
I am trying to use the twitter bootstrap to show input with dropdown button as mentioned in http://getbootstrap.com/components/
Below is the complete html same the one specified in the sample, But I am unable to get this working.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</body>
</html>
Request anyone to point out what is going on wrong as the dropdown is missing?
Thanks in Advance,
-Senthil
You are missing bootstrap js
Add this js in your <head> section
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
You'll want to add a "data-target" attribute to the button and an "id" to the dropdown.
<button data-target="#MYIDHERE" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul id="MYIDHERE" class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>
I am having some trouble with a dropdown menu with bootstrap. I have browsed around the other questions on here and not found an answer that is working for me. Here is the HTML head
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>On-Demand Reporting</title>
<link rel="stylesheet" type="text/css" href="styles/gridinator.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/jquery.tabify.js" type="text/javascript"></script>
</head>
I made careful note to link to JQuery before bootstrap.js
Here is the code for the button. This markup is taken pretty much exactly from the bootstrap 3 docs
<button type="button" class="btn btn-default dropdown pull-right" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
Then of course, the script to call the dropdown.
<script>
$("document").ready(function() {
$(".dropdown").dropdown();
});
</script>
If anyone could help me figure out what I'm missing here I would really appreciate it. Thanks!
You need to wrap the entire dropdown menu with an element that has the .dropdown class
You also need to remove .pull-right from the button and apply it to .dropdown
<div class="dropdown pull-right">
<button type="button" class="btn btn-default dropdown" data-toggle="dropdown">
User <span class="caret"></span>
</button>
<ul class="dropdown-menu active" role="menu">
<li>Change Password</li>
<li>Logout</li>
</ul>
</div>
Example: http://jsfiddle.net/52VtD/404/