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
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
there is a button in the page with the sintax below
<div _ngcontent-cnw-c181="" class="col text-center ng-star-inserted">
<p _ngcontent-cnw-c181="" class="text-primary font-weight-bold">
Click the button below
</p>
<button _ngcontent-cnw-c181="" type="button" routerlink="/web/click" class="btn btn-primary" tabindex="0" ng-reflect-router-link="/web/click">
<i _ngcontent-cnw-c181="" aria-hidden="true" class="fa fa-check-circle"></i>
Click Here
</button>
</div>
but when I try to localize it using Locator, it returns the error: Microsoft.Playwright.PlaywrightException: 'Unknown engine "routerlink" while parsing selector routerlink=/web/click'
Page.Locator("routerlink=/web/click").ClickAsync();
The only solution I found is by searching for "text=Click here" but I would like to use the "routerlink" keyword instead because the text might change more often in the future.
This should work: Page.Locator("//button[#routerlink='/web/click']").ClickAsync();
We are having ngb dropdown such as below
<div ngbDropdown class="d-inline-block" >
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
Somehow we tried attaching the [disabled]="true" but is not disabling.
Any other way or how to do it ?
Put your code inside ng-container to disable it.
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 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