Here is some code from my project:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
How can I make the text(select) and the caret appear in one line?
use this css:
#btnText{
display: inline;
padding-right: 10px;
}
Put the Span with the caret in the #btnText div.
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
#btnText{
display: inline-block;
margin-right: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
By simply adding display:inline-block to your #bigText div as in the snippet below. I have also added some margin for spacing.
#btnText{
display: inline-block;
margin-right: 5px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
Related
I am helping my friend to create a replica of scholarship portal for college project. I made the navbar using materialize css and gave the html and css file to my friend to integrate it with angular. Me and my friend both are absolute beginners at angular and the dropdowns & sidenav does not respond upon clicking. Saw many solutions on the internet but we are unable to solve it.
Putting my html code of the navbar below
body{
font-family: 'Noto Sans JP', sans-serif;
}
*{
margin: 0;
padding: 0;
}
.dropdown-content{
width: max-content !important;
height:auto !important;
}
.nav-wrapper{
background-color:white;
}
.material-icons{
color: #EBA63F;
}
#logo-nav{
color: #E40C2B;
width: 100%;
}
.li-nav{
color: #3CBCC3;
}
.li-nav:hover{
color:#1D1D2C;
}
#sidenav1{
color: #1D1D2C;
background-color: #F7F4E9;
}
#sidenav1:hover{
background-color:#EBA63F;
color: #1D1D2C;
}
#dropdown-css{
color: #1D1D2C;
}
#dropdown-css:hover{
background-color: #EBA63F;
}
#sidenav1>.material-icons{
color: #1D1D2C;
}
.sidenav{
background-color: #F7F4E9;
}
.logos{
margin-top: 20px;
background-color: #3CBCC3;
}
#media only screen and (max-width: 810px) {
div.nav-wrapper {
/* height: 15vh;*/
-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;
}
}
#media only screen and (max-width: 560px) {
#logo-nav{
font-size: medium;
}
}
.logo,.logo1{
height: 40px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Sans&family=Noto+Sans+JP:wght#500&display=swap" rel="stylesheet">
<!--jquery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!--bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--materialize css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--materialize css icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<!--bootstrap font awesome cdn-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--css-->
<link rel="stylesheet" href="navbar2.css"/>
<link rel="stylesheet" href="homepage.css"/>
<title>Navbar Page</title>
</head>
<body>
<header>
<!--navbar ends here-->
<!-- Dropdown Structure for navbar -->
<ul id="dropdown1" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Login</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for navbar -->
<ul id="dropdown2" class="dropdown-content">
<li><a id="dropdown-css" href="#!">Student Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Institute Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Ministry Register</a></li>
<li class="divider"></li>
<li><a id="dropdown-css" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown3" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Login</a></li>
<li><a id="sidenav1" href="#!">Institute Login</a></li>
<li><a id="sidenav1" href="#!">Ministry Login</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Login</a></li>
</ul>
<!-- Dropdown Structure for sidenav bar -->
<ul id="dropdown4" class="dropdown-content">
<li><a id="sidenav1" href="#!">Student Register</a></li>
<li><a id="sidenav1" href="#!">Institute Register</a></li>
<li><a id="sidenav1" href="#!">Ministry Register</a></li>
<li><a id="sidenav1" href="#!">Nodal Officer Register</a></li>
</ul>
<!-- Navbar main code starts here -->
<nav>
<i class="material-icons" >menu</i>
<div class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li><a class="li-nav" href="#">Home</a></li>
<li>
<div class="center row">
<div class="col s12 " >
<div class="row" id="topbarsearch">
<div class="input-field col s6 s12">
<i class="material-icons prefix">search</i>
<input type="text" placeholder="Search..." id="autocomplete-input" class="autocomplete li-nav" >
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="right hide-on-small-only">
<!-- login and register navbar Dropdown Trigger -->
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown1">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger li-nav" href="#!" data-target="dropdown2">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="li-nav" href="#">About Us</a></li>
<li><a class="li-nav" href="#">Contact Us</a></li>
</ul>
</div>
<!--sidenav main code-->
<ul class="sidenav" id="mobile-demo">
<li><a id="sidenav1 show-on-large" href="#home">Home</a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown3">Login<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" class="dropdown-trigger" href="#!" data-target="dropdown4">Register<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a id="sidenav1" href="#aboutus">About Us</a></li>
<li><a id="sidenav1" href="#contactus">Contact Us</a></li>
</ul>
</nav>
<nav>
<div class="nav-wrapper">
<a id="logo-nav" href="#!" class="brand-logo center">National Scholarship Portal</a>
</div>
</nav>
</header>
<!--navbar ends here-->
<script>
$(document).ready(function(){
$('.dropdown-trigger').dropdown({inDuration: 300, outDuration: 100, coverTrigger: false, alignment: 'center',});
$('.sidenav').sidenav();
//$('.button-collapse').sideNav();
$('.parallax').parallax();
});
</script>
</body>
</html>
It would mean everything to me if anyone can give me code for angular
I only included snippet of navbar above
This is my entire page that I made: https://drive.google.com/drive/folders/1QSifk0BneW3i_OKIU0RYcMRFusZ78q-k?usp=sharing
Please Please help me run this code in Angular
I have a bootstrap drop down what I'm trying to achieve is how can I center the drop-down menu to the center of the button? Right now it's being aligned to the left or right of the button based on the available space on the area. Thanks in advance.
.dropdown {
margin-left: 40%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
One way to do this would be to use transform: translate(calc(-50% + 20px), 40px);.
I had to add !important in the example, but if you have access to the code that is setting the style attribute on the menu, you can update the transform there instead.
.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>
I have a dropdown menu with contains a data toggle for tabs. I have the problem that once I selected an item, the item stays selected and stays blue.
Any ways to fix this?
Code:
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
Make a id="dropdown-menu" next to class="dropdown-menu". This would be more convenient. reference line -20.
Make a Javascript that will add .active class in your clicked area/HTML. For example if you click on
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
that will add .active class in there
<button class="dropdown-item class" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
And it will remove .active class from the previous position. This .active class is a Bootstrap class. It will render CSS style from Bootstrap.
Code below-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<title>HTML5, CSS3 and JavaScript demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<ul class='nav nav-tabs'>
<li class='nav-item'>
<a class='nav-link active' data-toggle='tab' href='#overall'>Overall</a>
</li>
<li class='nav-item'>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</button>
<div id="dropdown-menu" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" data-toggle='tab' href="#zombie" type="button" aria-selected="true" >Zombie</button>
<button class="dropdown-item" data-toggle='tab' href="#spider" type="button"aria-selected="false">Spider</button>
<button class="dropdown-item" data-toggle='tab' href="#enderman" type="button"aria-selected="false">Enderman</button>
</div>
</div>
</li>
</ul>
<div class='tab-content'>
<div class='tab-pane container active' id='overall'>
blabla
</div>
<div class='tab-pane container' id='zombie'>
zombie
</div>
<div class='tab-pane container' id='spider'>
Spider
</div>
<div class='tab-pane container' id='enderman'>
Enderman
</div></div>
<script>
var header = document.getElementById("dropdown-menu");
var btns = header.getElementsByClassName("dropdown-item");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
document.getElementById("overall").innerHTML = this.innerText;
});
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
i have created a dropdown menu with provinces name and below each province its citesties are mentioned. I want these cities to appear in submenu on left side of province when it is clicked.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<select name="campus" id="campuslocation" class="browser-default" required="">
<optgroup label="Eastern Cape">
<option value="31">Umtata / Mthatha</option>
<option value="32">Willowmore</option>
<option value="33">Willowvale</option>
</optgroup>
<optgroup label="Free State">
<option value="47">Koppies</option>
<option value="48">Kroonstad</option>
</optgroup>
</select>
select is not the right element for this task, a dropdown is much better suited.
There is no default way to create submenus but it's easy enough to achieve.
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Eastern Cape</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Umtata / Mthatha</a></li>
<li><a class="dropdown-item" href="#">Willowmore</a></li>
<li><a class="dropdown-item" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Free State</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Koppies</a></li>
<li><a class="dropdown-item" href="#">Kroonstad</a></li>
</ul>
</li>
</ul>
</div>
Hope, this will help. We can able to use , instead of select.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown {
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Eastern Cape <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Free State <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Umtata / Mthatha</a></li>
<li><a tabindex="-1" href="#">Willowmore</a></li>
<li><a tabindex="-1" href="#">Willowvale</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
My dropdown opens up but it shows an empty menu and does not have the items I've added. Here's a picture:
However my dropdown contains items:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Theme <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Blue</li>
<li>Purple</li>
<li>Green</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
This is my head:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Am I missing something? Why does this happen?
Using Bootstrap you dont need
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
Try this with out what you have for calling the script and you will see it works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!--Primary buttons with dropdown menu-->
</body>
Might be js error,add this link below and i tried its works
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>