I'm trying to show a dropdown via JS. Unfortunately it seems like there's a bug in Bootstrap 5.
In this example code, showing the modal works, but showing the dropdown throws an exception: Uncaught TypeError: Cannot read property 'classList' of undefined at _e.show (dropdown.js:140)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>
<div id="testDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<div id="testModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let testModal = document.getElementById("testModal");
//new bootstrap.Modal(testModal).show(); //works
let testDropdown = document.getElementById("testDropdown");
new bootstrap.Dropdown(testDropdown).show(); //doesnt work
</script>
</body>
</html>
Am I doing something wrong or is this a bug?
Thanks in advance.
The element should be the dropdown-trigger instead of the parent dropdown...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="testDropdown" type="button" data-bs-toggle="dropdown"> Dropdown button </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Demo
Note: Bootstrap 5 includes a new auto-close option. This must be set to false in order to programmatically trigger the dropdown from outside the dropdown's parent.
I got it working without using a button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="w-75 mt-2">
<div class="input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" placeholder="Search for something">
<button class="btn btn-primary" type="button">Search</button>
</div>
<div class="dropdown">
<div data-bs-toggle="dropdown" id="DROPDOWN_SEARCH"></div>
<div class="dropdown-menu w-100">
<a class="dropdown-item" href="#">Result 1</a>
<a class="dropdown-item" href="#">Result 2</a>
<a class="dropdown-item" href="#">Result 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
let searchDropdown = new bootstrap.Dropdown("#DROPDOWN_SEARCH");
searchDropdown.show();
</script>
</body>
</html>
Related
When I click on the button I want it to open up from the bottom and collapse back down rather than like a dropdown.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
</body>
In your fiddle you are loading bootstrap 3.x script, which is inconsistent with the styles, which are 5.X.
Independent of the version, a solution for your request is to use a dropup.
Here's a running snippet using version 5:
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>
<body>
<!-- Default dropup button -->
<div class="btn-group dropup" style="position: absolute; bottom: 10px;">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup 2
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
hello there I want to try on this like the gallery button and user side dropdown on the left side and its not show on mobile mode when the screen minimize but show on the top like ackta ltd the complete code is on snippet but i try many time to do but its can't solved to me please help me in this query if you people want pic i will upload the pic for you but i think the snippet code is enough for you pepole
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap All in One Navbar</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda+One">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="assets/css/headerstyle.css" rel="stylesheet">
<script>
function myFunction() {
var x = document.getElementById("navbarCollapse");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "display";
}
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<i class="fa fa-cube"></i>Ackta LTD UK</b>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse" id="navbarCollapse" onclick="myFunction()">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<div class="navbar-nav">
<a class="nav-link " href="index.php"><i class="fa fa-home"></i> Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="index.php"><i class="fa fa-upload"></i> Upload</a>
<div class="nav-item dropdown">
<i class="fa fa-user-circle"></i> About
<div class="dropdown-menu">
<a class="dropdown-item" href="privacypolicy.php">Privacy Policy</a>
<a class="dropdown-item" href="termofuse.php">Terms & Use</a>
<a class="dropdown-item" href="team.php">Teams</a>
<a class="dropdown-item" href="contact.php">Contact Us</a>
</div>
</div>
</div>
<div class="d-none d-lg-block ">
<div class="navbar-nav ml-auto ">
<div class=" container pr-5 ">
<button type="button" class="btn btn-outline-primary btn-sm btn-block "><i class="fa fa-file-image-o" aria-hidden="true"></i> Gallery</button>
</div>
<div class="nav-item dropdown pr-5">
<img src="assets/i/face.png" class="avatar" alt="Avatar"> Paula Wilson <b class="caret"></b>
<div class="dropdown-menu">
<i class="fa fa-user-o"></i> Profile</a>
<i class="fa fa-calendar-o"></i> Calendar</a>
<i class="fa fa-sliders"></i> Settings</a>
<div class="dropdown-divider"></div>
<i class="material-icons"></i> Logout</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
I would like to have a menu on my admin panel to navigate through the different functionalities an admin has on my website. I am using bootstrap and I found a static menu code snippet (so no dropdown) in the documentation: https://getbootstrap.com/docs/4.4/components/dropdowns/#menu-items
I am pretty sure my jquery, popper and boostrap js files work because my navbar works flawlessly. Am I doing something totally wrong here? You'll find the exact snippet of the bootstrap documentation in the body of my html.
Thanks
<!DOCTYPE html>
<html lang="nl">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=./../dependencies/bootstrap/css/bootstrap.css />
<!-- Custom CSS (always after bootstrap) -->
<link rel="stylesheet" href=./../dependencies/css/style.css />
<title>Admin - Paneel</title>
</head>
<body>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<script src=./../dependencies/jquery/jquery-3.4.1.js></script>
<script src=./../dependencies/bootstrap/js/bootstrap.bundle.js></script>
</body>
</html>
your dropdown-menu div should wrap in a
dropdown div
having a button 🔳
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<!-- your drop down gose here -->
</div>
<div class="dropdown">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
bootstrap 4 drop down is not showing all the links in dropdown-menu please refer image
its not showing beyond red band , is there something i missing cant figure out that
.red-block{
height: 220px;
background-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
**
So link 3 is not visible , can someone correct this ?
Can u present your full code. Anyways, please try my code and see if it helps. I have replaced your div and anchor to ul - li - anchor structure.
let me know if it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>
Try adding this in your css.
i dont know this will work inside your html file or not.
.dropdown-menu{
postition: relative;
z-index:-1
}
Sometimes this happens when you try to display an element outside of a container/element that is overflow: hidden
Ex:
.red-block{
overflow: hidden;
background-color: red;
height: 220px;
}
What you could do is 1. Check if any there's any overflow: hidden element and change it or 2. move the .dropdown element right next to the div.red-block like this:
HTML
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<!-- RED BLOCK -->
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
</div>
<!-- END RED BLOCK
DROPDOWN -->
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
<!-- END DROPDOWN -->
CSS
.red-block{
background-color: red;
height: 220px;
}
.dropdown.ml-20{
position: absolute;
bottom: 25%;
}
Hope it helps
Doing a basic example but the bootstrap style won't apply to the button coming from the React component. It does apply to the button within the HTML file. I have provided the bootstrap css from the CDN in the HTML file. Running on a simple python web server (python -m http.server 8001). What gives?
example1.jsx:
// example1.jsx:
var MyPulldown = React.createClass({
render: function () {
return <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Second Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
}
});
React.render(
<div>
<MyPulldown/>
</div>,
document.getElementById('container')
);
example1.html
<!-- example1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!-- The core React library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx" src="example1.jsx"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
First Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div id='container' class="form-group">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
In react class prop is reserved. You need to use className
className
To specify a CSS class, use the className attribute. This applies to
all regular DOM and SVG elements like <div>, <a>, and others.
var MyPulldown = React.createClass({
render: function () {
return <div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Second Dropdown
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</div>
}
});