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.
Related
I'm using bootstrap (I have bootstrap and jquery included and dropdowns working elsewhere) and tryingo to use my profile icon as a trigger for a dropdown with an option to logout.
My profile icon is showing the downward caret like it's a dropdown, but when I click there is no dropdown triggered.
I can't use a button here, it needs to be tied to the icon.
What exactly am I doing wrong?
<div class="dropdown">
<div class="menu-button profile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="far fa-user-circle fa-2x"></i>
</div>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</div>
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>
This question already has an answer here:
Adding images with option tag [duplicate]
(1 answer)
Closed 6 years ago.
I try to create a search box with a dropdown inside the search text field and i want add a different image for every option
For now this is my result:
http://www.bootply.com/TqXN4y8Se5
The image are not visible, in dropdown are not possible add image?
Thanks for any help!
the html option tag does support text only
see other pst Adding images with option tag
altough you could use bootstraps dropdown component.
http://getbootstrap.com/components/#dropdowns
altough it requires custom javascript to listen to changes and react accordingly.
<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>
You can use a background image but it's not available cross-browser. Or you can use jquery like http://jqueryui.com/selectmenu/#custom_render
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>