I'm trying to use a basic dropdown like so...
<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>
But it wasn't working. So I googled around and added this to my index...
<script>window.__theme = 'bs4';</script>
Still nothing. Thinking I wasn't including something correctly, I placed a breakpoint in the bootstrap.js at the first line in the dropdown toggle....
Dropdown.prototype.toggle = function toggle() { if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
To my surprise, I was actually hitting this breakpoint. To my greater suprise I was hitting this breakpoint twice. With one click, it opens the dropdown, only visibile because of hitting the breakpoint a second time, and when I continue it toggles the dropdown closed. So in actuality it is toggling every time I click it, but it is toggling twice so fast that it opens and closes before I can see it, seeming to not work at all.
Is this a known issue or is there a fix for this?
Related
PFB my code. I have designed a drop down list using bootstrap in asp.net mvc. The contents of the list are static and hard coded. When selection is changed in drop down, the latest item is not updated. I am attaching my code as well as the screenshot of the issue. In drop down list, even if I select Assigned, the status list is not getting updated.
the status field is not changing to assigned or in progress<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
You'll have to use Javascript to update the model if you use a bootstrap dropdown. Just keep a hidden for on the page, then attach a handler to the dropdown's change.
One thing to note is that Bootstrap dropdowns don't fire a change event. You'll have to attach handlers to the individual items. Something like this:
$('.dropdown-menu a').click(function(e) {
// set the hidden field to the new value
var newValue = $(this).text();
$('#foo').val(newValue);
});
#Html.HiddenFor(m => m.myProperty, new {id = "foo"})
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" runat="server" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Status
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownStatus">
<li>Assigned</li>
<li>In Progress</li>
<li>Resolved</li>
</ul>
</div>
Of course, if you don't really need a Bootstrap dropdown, and perhaps only need it to look like it, you could do it very easily by just using a regular HTML dropdown and styling it like a bootstrap dropdown:
#Html.DropDownListFor(m => m.myProperty, new {#class = "form-control"})
form-control is a bootstrap css class that makes your input controls more Bootstrap-like. It's not exactly the same though (although I like it better), so the choice will be up to you.
I need some help on the backpack, the buttons.
I have a list of products, and in the edit and delete buttons I have added two more to the nutrient of a product and its price. Using the backpack I do not know how to load the id of the product in question to put this additional information. How can I do it?
Image
Inside the button view you created you should be able to use $entry. Check out https://laravel-backpack.readme.io/docs/crud-buttons for more info.
Even though this event happened more than 1 month, I'll try to share some information to help others.
1. First of all you need to create a new blade file
resources\views\vendor\backpack\buttons\crud\buttons.
2. Inside of your file
<i class='fa fa-list'></i>Listar Nutrientes
The $entry->getKey() is going to provide the "id" to you.
3. Connecting the "Button" to your CrudCrontroller
Inside your ProductCrudController you need to add a new entry.
$this->crud->addButtonFromView('line', 'extra_button', 'extra_button', 'beginning');
the extra_button "just a example" needs to have the name of your blade file in the third parameter "if i'm not wrong".
After this you should get your new button for each line listed in the table.
Just a tip: If you're going to add "a lot of buttons" try to use a
drop down button.
<div class="btn-group">
<button type="submit" class="btn btn-primary btn btn-xs btn-default">
<span class="fa fa-list" role="presentation" aria-hidden="true" style="color: #f1f1f1"></span>
<span data-value="save_and_back" style="color: #fff">Opções</span>
</button>
<button type="button" class="btn btn-primary dropdown-toggle btn-xs btn-default" data-toggle="dropdown" aria-haspopup="true" aira-expanded="false" aria-expanded="true">
<span class="caret"></span>
<span class="sr-only">▼</span>
</button><div class="dropdown-backdrop"></div>
<ul class="dropdown-menu" style="font-size: 12px;">
<li><i class='fa fa-plus'></i>Add new nutriente</li>
<li><i class='fa fa-list'></i>Listar nutrientes</li>
<li><i class='fa fa-arrow-right'></i>Second Action</li>
<li><i class='fa fa-times'></i>Cancel</li>
</ul>
</div>
I am working on a django project, that is using bootstrap4 and I'm with a little problem with dropdown toggler.
The toggler only toggles the dropdown-menu after the second link!
What I've done wrong?
This is my dropdown HTML code:
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Toggler
</a>
<div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I had the same problem then resolved. Often I due to a double import of bootstrap js libraries.
Hope will help you.
you need to use the toggle like that and assign the data-target to the drop down menu with it's id
using
data-target="#navbarDropdown"
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
and then assign that id to the menu
<li class="nav-item dropdown show">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarDropdown" class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
I came across the same issue recently, i solved this issue by adding $('.dropdown-toggle').dropdown() after loading the drop-down. Hope this may help without changing from the data-toggle="dropdown" to data-toggle="collapse".
Try to put bootstrap js file before bootstrap css
Ex:
Link Bootstrap.min.js file first.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Then link css file
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
I got the same issue and after changing the positions of the js and css, dropdown works well. Hope it helped you.
I came across the same issue recently, i solved it by writing custom script:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
I had the same issue, it occurred because i imported bootstrap library twice. After removing one of them it worked well.
Hope it help you.
Agree with Iwan B. In Rails in javascripts I left only bootstrap.bundle.js. In Gemfile add gem 'popper_js', '~> 1.14.5', respectively in application.js we should add
//= require popper
I'm developing an app with Angular and Semantic-UI.
I have a dropdown menu like the following: https://plnkr.co/edit/BTCxfk
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I would like to have that users can click on a single item using tab and enter buttons.
As you can see they can only move towards menu items, but they can't trigger the click event.
Any idea?
I would give this item a tab-index of 0 since most elements like this aren't tabbable by default.
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text" tabindex="0" role="menu">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I added tab index of 0 and role of menu.
I'm putting up a Bootstrap "split button" modal, which looks something like this:
<div class="btn-group">
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
<button class="btn btn-small dropdown-toggle btn-primary" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a></li>
<li><a tabindex="-1" href="/comment/something-else">Do something else</a></li>
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_unhide-people" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/comment/do-another-thing">Do another thing...</a></li>
</ul>
</div>
The thing of interest here is that the "Do the thing" action is presented in two ways: As an action to be taken when the main button is clicked, and as an action to be taken when an item in the dropdown menu is selected. These actions are set up as click handlers on the <a> tags in the split button, via some javascript init-ing.
Both actions work fine in Chrome and Safari. However, in Firefox, the action attached to the button does NOT fire, while the action attached to the link does. Some poking around during execution reveals that the click handler on the button is not firing, although it's definitely getting set up.
Any ideas out there about why this is (happening)? Thanks!
Found it, more or less: Twitter Bootstrap buttons are unresponsive in IE8 had a working approach. Instead of formatting the button as:
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
do it as a pure <A> link with the appropriate button-style classes:
<a tabindex="-1" href="#" class=" btn btn-small btn-primary ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
The appearance is identical, and it works fine in Firefox, IE, and Opera (both platforms). Whew.
I just had the same problem in 2019 (Bootstrap 4.3.1, Firefox Quantum 69.0) and found this post from 2011 that solved the problem for me: just remove the animation for the modal (remove the "fade" class from the parent div). Original post is here: http://chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/