Here is my bootstrap dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
I try to implement draggable on it via jQuery UI with code
$('.dropdown').draggable();
But I can only drag it only when the dropdown menus are shown and not when they are hided. Also i cannot drag on the button but only on the <ui> of the dropdown list.
Can some one explain me whats the problem and how to fix it?
This will work. You have to prevent the button click.
$(document).ready(function() {
$( ".dropdown" ).draggable({
cancel: false,
});
});
Related
Hope it is not a duplicate question. I have some layout which is as follows,
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
How to enable dropdown on button click with angular?
To enable/disable
<div class="btn-group">
<button [attr.disabled]="dropdownDisabled ? true : null"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
<button (click)="dropdownDisabled = !dropdownDisabled">toggle</button>
to open/close
i assume that you're using bootstrap css style
<div class="btn-group dropdown" [class.open]="dropdownOpened">
<button (click)="dropdownOpened = !dropdownOpened"
type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
[attr.aria-expanded]="dropdownOpened ? 'true': 'false' ">
Category <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
When click on bootstrap button a list should be opened, but it doesn't respond on the click.
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle">
<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>
code:
http://jsfiddle.net/Fanadka/r0sfvrcz/
Any idea?
Firstly, you have to include jQuery in your fiddle.
Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this
<div class="btn-group dropdown">
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
FIDDLE
I am new in bootstrap,the dropdown won't hide, i want dropdown when
i hover on the link, but its show always, advance thanks to
everyone. here is the code
<nav>
<ul class="nav navbar-nav main-navigation">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>PAGES</li>
<li>FEATURES</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">MEGA MENU</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
You can also use Jquery:
https://jsfiddle.net/2w4n7pho/
<script>
$(function(){
$("li.dropdown").hover(function(){
$(this).toggleClass("open");
});
});
</script>
By default, the Bootstrap (3.0+) dropdown menu only appears/disappears on click. This behavior would need to be overruled through CSS or JS. If you want to simply have the dropdown appear on hover while preserving the click to drop down functionality on mobile, something like this should suffice:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
Demonstration: http://www.bootply.com/tpCO1Nb4E8
I want to keep Bootstrap 3 dropdown menu visible when click anywhere in the dropdown menu. But it will be hidden when click on anywhere outside of the dropdown menu.
<li class="dropdown">
Location <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bangladesh</li>
<li>USA</li>
<li>Canada</li>
<li>Japan</li>
<li>China</li>
</ul>
</li>
Try this
HTML
<div class="dropdown" id="open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
DEMO
You can do this by returning false when anything inside the ul is clicked:
$(function(){
$("#open").find("ul").on("click", function(){
return false;
});
});
JSFiddle
I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}
I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019
I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.