I have an angular 2 application that uses bootstrap 3.3.7 and jquery 1.12.4. The code is as follows:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
The dropdown menu appears fine. But clicking on the individual buttons in the list is not invoking the associated event handler. This issue is occurring on Safari browser on iOS and Chrome on Android. However, it works perfectly on Edge and Chrome on the laptop/desktop.
I have tried various solutions provided for earlier versions of Bootstrap on stackoverflow and github, but they aren't working.
How do I get this to work?
I resolved this issue by using the dropdown from ng2-bootstrap --> https://github.com/valor-software/ng2-bootstrap
Related
I have read a few posting on a similar issue but that does not seem to solve my issue.
Dropdown-menu class works fine on all browsers on my mac but does not seem to work on ipad (reported from my 91-year old mother on quite an old ipad). Unfortunately, I do not own an ipad, so I can not test.
I read about the href="#" missing (but IMO that does not apply here) as well as the popper.js missing but it is within bootstrap.js... so what is I am doing wrong or is there a work around?
You can see it in action on my website in the portfolio section.
Here is the code I use on my website to display a list of portfolio in a dropdown menu:
<div class="row d-flex justify-content-left">
<div class="search-box col-md-8 col-lg-7 col-xl-6">
<form action="/portfolio">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownSubNav" data-bs-toggle="dropdown" aria-expanded="false">
Portfolios & collections...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownSubNav">
<li>
<a class="dropdown-item" href="/portfolio?p=portfolio">PORTFOLIO</a>
</li>
<li>
<a class="dropdown-item" href="/portfolio?p=portfolio&c=bestof"> • Best Of</a>
</li>
<li>
<a class="dropdown-item" href="/portfolio?p=portfolio&c=utopia"> • Utopia</a>
</li>
<li>
<a class="dropdown-item" href="/portfolio?p=portfolio&c=blackwhite"> • Black & White</a>
</li>
<li>
<a class="dropdown-item" href="/portfolio?p=portfolio&c=ethereal"> • Ethereal</a>
</li>
</div>
</div>
<input type="text" class="form-control" name="s" value="">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
<button id="mainHeartButton" style="visibility:hidden; display:none;" class="btn btn-secondary" type="button" onclick="window.location.href='/portfolio?s=cookie'; return false;">
<img id="mainHeart" src="/public/assets/icons/heart0.png" class="icon20" title="spacer">
</button>
</div>
</form>
</div>
</div>
It works fine on my Safari
Bootstrap supports latest stable release as below
Browser and devices supported
https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
I want to have a multiple nested offcanvas for Bootstrap 5.
When I click a button, the first offcanvas should be opened and then click another button which is on the first offcanvas, the second offcanvas should be opened over the first offcanvas and the first offcanvas should not be closed.
I will make second one smaller and so the first one still be shown.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample2" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample3" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample4" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample6" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample6" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
From the Bootstrap docs...
"Similar to modals, only one offcanvas can be shown at a time."
I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
i'm a beginner in angular, i want to display glyphicon-search glyphicon icon but i can not, i'm using angular5 bootstrap 4
<span class="glyphicon glyphicon-search"></span>
<h1>fffff</h1>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
Have you check that you installed bootstrap 4 or included package into header
I have button group in my asp.net mvc application:
<div class="btn-group">
<button type="button" id="btn-create-file-window" class="btn btn-default"><span class="glyphicon glyphicon-file"></span></button>
<button type="button" id="btn-open-file" class="btn btn-default" disabled="disabled"><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" id="btn-delete-file" class="btn btn-default btn-danger" disabled="disabled"><span class="glyphicon glyphicon-remove"></span></button>
</div>
After page reloading I get this result:
If I hover my mouse on the btn-create-file-window in Chrome33, I get expected result (same, as ie10). What am I doing wrong?
Bootstrap v3.1.1 from Nuget
Internet Explorer 10
Chrome 33.0.1750.154 m
my bad English :)
My problem is resolved in Google Chrome 34