I have a dropdown with search functionality. I'd like to be able to search "Category" for example, and see objects that I designate to said category. Currently everything is hidden (except the category you search for) if there are no results, unless the group/category name is included in the <li>.
My code (here is the JSFiddle which loads cleaner, for some reason):
$("#search-criteria").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".dropdown-item").each(function() {
var s = $(this).text().toLowerCase();
$(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
.search-box {
margin: 10px;
}
.scrollable-menu {
height: auto;
max-height: 500px;
overflow-x: hidden;
}
<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.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Components
</button>
<div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<li class="row search-box">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
</li>
<a class="dropdown-item" href="#">Component 1</a>
<a class="dropdown-item" href="#">Component 2</a>
<a class="dropdown-item" href="#">Component 3</a>
<h6 class="dropdown-header dropdown-item">Category</h6>
<a class="dropdown-item" href="#">Component In C</a>
<a class="dropdown-item" href="#">Component 2 In C</a>
<h6 class="dropdown-header dropdown-item">Category 2</h6>
<a class="dropdown-item" href="#">Component In C2</a>
<a class="dropdown-item" href="#">Component 2 In C2</a>
</div>
</div>
Separate everything out more, have each header in it's own section and nest the items underneath that. Then when you have scope on search where this refers to the desired h6, you can hide/show all children elements of that by class,
$(this).children('.dropdown-item').show();
or something similar.
I wound up adding a span with the category name to each of my child items. Kind of round about and I'd love to see what others can come up with that's better, but for now this new code works. Try typing test in to see what I mean.
Old Code:
$("#search-criteria").on("keyup", function() {
var g = $(this).val().toLowerCase();
$(".dropdown-item").each(function() {
var s = $(this).text().toLowerCase();
$(this).closest('.dropdown-item')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
.search-box {
margin: 10px;
}
.scrollable-menu {
height: auto;
max-height: 500px;
overflow-x: hidden;
}
<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.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Components
</button>
<div class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<li class="row search-box">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search components" />
</li>
<a class="dropdown-item" href="#">Component 1</a>
<a class="dropdown-item" href="#">Component 2</a>
<a class="dropdown-item" href="#">Component 3</a>
<h6 class="dropdown-header dropdown-item">Category</h6>
<a class="dropdown-item" href="#">Component In C</a>
<a class="dropdown-item" href="#">Component 2 In C</a>
<h6 class="dropdown-header dropdown-item">Category 2</h6>
<a class="dropdown-item" href="#">Component In C2</a>
<a class="dropdown-item" href="#">Component 2 In C2</a>
</div>
</div>
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>
folks, I can't seem to figure out why overflow is breaking the code
so below code works fine in two conditions.
a) if I remove overflow-x and overflow-y from .bs-exmple or
b) if I remove ul and li
but I need both in my code, however with these css and ul and li being in code, the dropdown collapses behind the div. what am i missing
.bs-example { border: 1px solid black; overflow-y: scroll; overflow-x: hidden; min-height: 100px; max-height: 250px; }
.bs-example .dropdown { position: absolute; z-index: 999; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="bs-example">
<ul class="list-group ">
<li class="list-group-item m-3 p-3">User 1
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</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>
</li>
<li class="list-group-item m-3 p-3">User 2
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu2
</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>
</li>
</ul>
</div>
</div>
so you see, the image below shows the dropdown behind the div
I have codepen saved here
https://codepen.io/ozzie6935/pen/NEZBwW?editors=1100
any help is much appreciated
The button which should unhide the dropdown menu actually hides the dropdown button instead. Also, I have one more dropdown menu in this navigation and it works perfectly fine.
<div class="side-nav pull-right">
<div class="dropdown">
<button type="button" class="profile dropdown-toggle" data-toggle="dropdown" id = "dropdownMenuButton" aria-haspopup="true" aria-expanded="false">Bonjour Arthur K. <img src = "images/triangle.png" alt =""/> </button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuButton">
Utilisateurs
Snippets
Traductions
</div>
</div>
Mon compete
</div>
check this working example.. for more read this
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
Dropdown button
</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>
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>
}
});