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
Related
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 a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
The collapsed navbar for mobile versions will not open. The website is www.insaka.org. This is the navbar code. I could have sworn it was working last time I checked it, but now it is not. Any ideas?
<div class="container">
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<%= render 'layouts/navigation_links' %>
<% render 'layouts/nav_links_for_auth' %>
</ul>
<div>
Donate
</div>
<div>
<img class="featurette-image img-fluid mx-auto img-responsive max-width:25px height:auto" src="../images/blue insaka logo.jpg">
</div>
</div>
</nav>
If you check for javascript errors in the console you will find the problems:
popper.min.js
bootstrap.min.js
holder.min.js
These three js files could not be found.
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
I have the following snippet. I am unable to toggle the data values in smaller resolution though the button appears on the scree. No data has been displayed when I click on toggle button.
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-headerdata-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-headerdata-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About Us</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Can someone help resolving the issue?
Thanks
This was just because of improper linking of bootstrap JS.!