I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.
I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.
Is there a way to do this?
By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:
always - (Default) automatically closes the dropdown when any of its elements is clicked.
outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.
disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open.
Here is a sample : Plunker
<div class="btn-group" dropdown auto-close="disabled">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" 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>
Related
I'm inserting Dropdowns into a dynamic form. The problem is when i insert more than one Dropdown.
When i click on any Dropdown button, the toggle list only shows above the first Dropdown button, not above the Dropdown button i clicked.
So say i have 3 Dropdown buttons inserted into the form. If i click Dropdown 2 or 3; the list of contents show above Dropdown 1.
This is the code i'm inserting into the form.
let vendor = `<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 test" id="vendor['+nextindex+']" name="vendor['+nextindex+']" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>`
I was able to find the solution.
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
It was an Issue with popper.js.
I have same button for multiple times each one have same work that is of hide and show. I have to toggle following data after click on that button
<button type="button" class="pull-right btn menu">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="downmenu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
and js code is
$('.menu').click(function(){
$(this).each(function(){
$('.downmenu').toggle('show');
});
});
my problem is that after click on any button all buttons are working. How to toggle each separately. I have to toggle downmenu ul list on each button so how can i do it?
The loop inside the click event is redundant. The problem is the global selector for .downmenu which selects all elements with that class. The solution is to isolate the element .downmenu next to the button clicked:
$('.menu').click(function(){
$(this).next('.downmenu').toggle('show');
});
I'm using dropdown feature from bootstrap. I want the menu still visible until I click back the button back. It must look like a switch . If we want to see the list, we must click the button, and also to hide it back. And it still open although we click in the outside and in the inside of the list button .
<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>
<div class="dropdown keep-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>
I need to open and to close the dropdown menu , only from the button.
I use this, but still it hide the list when i click in the inside list.
Here is the solution
Fiddle
$('.keep-open #dLabel').on({
"click": function() {
$(this).parent().attr('closable', true );
}
})
Click event is sent when the bootstrap is failed on hide dropdown with another call to hide dropdown as suggested by author
Just add this to your code
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the same position on the form once a user selects a value from the drop down?
My drop down is setup as:
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
My javascript is setup as:
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});
In your page directive <%# Page... add this
MaintainScrollPositionOnPostback="true"
if this doesn't work for you have a look at this article here or here
Hope this will work for you
The solution is is to replace the href attribute with the data-target attribute.
// This will correct the behavior and keep the page focused.
<li><a data-target="#" data-value="something else here">Something else here</a></li>
// This will cause the page to jump
<li>Separated link</li>
I have a button which on clicked shows a dropdown we are using bootstrap to show the dropdown on button click below is my code.
<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>
The requirement is that I have to show a div pop up stating system error which will occur only when the button click is not working.
How to check if button click is working or not and show pop up.
The above code is a sample code from w3schools
my main code is written in angularjs and I am using angualar-ui-bootstrap for the drop down. the list values are also coming from the controller.