I have a table and in last column I have the following drop down:
<td>
<div>
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" id="dropdownMenu2" type="button">Dropdown</button>
<div aria-labelledby="dropdownMenu2">
<button type="button">Action</button> <button type="button">Another action</button> <button type="button">Something else here</button>
</div>
</div>
</td>
When I click on drop down it doesn't open, what could the problem be?
Could it caused by the aria and data attributes?
I don't think the className attributes are working here. If you replace "className" by "class" and just add bootstrap it works.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<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>
</div>
</td>
</body>
</html>
I had a similar issue. After moving the script files (bootstrap, jquery, etc) from bottom of the file into the <head> bootstrap dropdowns started working.
Related
I want to add a dropdown menu to my navbar but the menu is always out of the page.
Here is my code :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle mr-3"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item dropdown-menu-right"
type="button">Action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Another action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Something else here</button>
</div>
</div>
</nav>
Dropdown works good but it is always out of the right side of my screen...
A little space is created by my dropdown menu on the right side of the page.
According to the v4.0 doc :
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
Two options :
Upgrade your bootstrap version. It's working fine with v4.6
Use custom classes instead of bootstrap navbar
[EDIT 1] Here is a working example with bootstrap v4.6. Also i have removed the mr-3 class for better rendering.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
I am facing an issue when trying to create a responsive menu or dropdown button with Bootstrap 5. Everything seems ok. The navigation icon & dropdown icon appear. But it's not working. When I clicked the nav icon or dropdown button, no dropdown menu appeared.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link rel="stylesheet" href="css/bootstrap.rtl.min.css" -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<nav class="navbar navbar-light bg-light navbar-expand-sm mb-3">
<a class="navbar-brand">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" tabindex="0" data-bs-toggle="dropdown" data-bs-submenu="" aria-expanded="false">Dropdown 3</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown">Action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<button class="dropdown-item" type="button">Something else here</button>
<button class="dropdown-item" type="button" disabled="">Disabled action</button>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
<div class="dropdown-header">Dropdown header</div>
<div class="dropdown dropend dropdown-submenu">
<button class="dropdown-item dropdown-toggle" type="button">Another action</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Sub action</button>
<button class="dropdown-item" type="button">Another sub action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<button class="dropdown-item" type="button">Something else here</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" type="button">Separated link</button>
</div>
</li>
</ul>
</div>
</nav>
<!-- script src="js/bootstrap.bundle.min.js"></script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
I have a table header with buttons, but the moment I add my dropdown button, it moves all of them around and makes them ugly to look at. This is my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
These are my other buttons:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
<?php endif; ?>
</div>
I want to put my dropdown next to the other buttons, but I'm guessing because it's a div and not a button they don't align properly?
When I put my dropdown in the same div as my buttons, the dropdown goes vertically above the other buttons.
Would appreciate some help!
You can use flex to align your element. like Bootstrap classes d-flex and justify-content-between. Wrap your content in above classes like below code snippet.
For more alignment options check bootstrap official docs
https://getbootstrap.com/docs/4.6/utilities/flex/#justify-content
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Downloaden
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
<div>
<button type="submit" form="selecties"
class="btn btn-outline-secondary btn-sm">E-Mailen
</button>
<button type="submit" form="selecties"
class="btn btn-outline-danger btn-sm">Verwijderen
</button>
<a
class="btn btn-outline-success btn-sm">Data
toevoegen</a>
</div>
</div>
I want to put the View button on left and the add button on right, but next to each other. The 2 buttons are in different divs. How can I do this?
Demo
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
The easy way is to add a float: left; to the first button container.
.btn-group {
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
<div id="rolecontainer" class="container">
<div id="addContainer" align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
You can put both buttons inside the same div, and use bootstrap classes "left" and "right":
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="btn-group" id="divNewNotificationsRole-admin">
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div id="rolecontainer" class="container">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">View</button>
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning right">Add</button>
</div>
You can use bootstrap row and column classes to avoid various resolution issues.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div class="btn-group" id="divNewNotificationsRole-admin">
<button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View</button>
<div id="myDropdown" class="dropdown-menu">
<li><a id="dropdown1" class="dropdown-item" href="#">1</a></li>
<li><a id="dropdown2" class="dropdown-item" href="#">2</a></li>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-1 col-md-1 clo-lg-1">
<div id="rolecontainer">
<div id="addContainer">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
</div>
</div>
</div>
A better practice for this is to CSS both parent divs containing the button with
.div1, .div2 {
display: inline-block;
}
Having this will put them inline.
I need help to add dropdown input inside modal bootstrap. because when I try to put this below code:
<select>
<option>Categories</option>
</select>
inside modal bootstrap. there is nothing to show inside modal-body.
Please help me.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
You try the following
<link rel="stylesheet" property='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="alert-info">
The MainDropdown works as expected. A minor side note is that clicking directly on the checkbox keeps the dropdown open, whereas clicking on the "label" portion outside of the checkbox closes the dropdown. In either case, the checkbox is appropriately
toggled.
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MainDropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action long words to show content</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<label class="dropdown-item">
<input type="checkbox" name="test" value="1" /> Test</label>
</div>
</div>
<br/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert-danger">
The ModalDropdown seems to work for "a" tags. Clicking on the input checkbox directly will have the same behavior as MainDropdown in Chrome 56, but in Firefox 51 the menu will close. Clicking on the "label" portion outside of the checkbox will close the dropdown in either browser without toggling the checkbox state.
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ModalDropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action long words to show content</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<label class="dropdown-item">
<input type="checkbox" name="test" value="1" /> Test</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>