I'm setting a slider with lightbox images inside, so you can see a bigger picture. The problem comes when the image is fullscreen. You need to press the next button 3 times in order to get to the next image. I don't know where I went wrong, as the console throws no error.
I've put the whole template in a codepen:
<div data-uk-slider class="uk-slidenav-position">
<div class="uk-slider-container uk-container-center">
<ul class="uk-slider uk-grid" data-uk-grid-match>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></a></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
<li><a class="uk-display-block" href="" data-uk-lightbox="{group:'gallery'}"><img src=""/></li>
</ul>
</div>
</div>
https://codepen.io/lord_enzo/pen/BZWzvb
So, apparently I'm blind and could not see that I hadn't closed any of the tags. Putting in place all the made it work!
Related
I have an issue about auto closing with bootstrap 5 (never tried with previous versions). I always have the default behaviour. I tried with Chromium and Safari (...).
To investigate, I started back, copying the code in https://getbootstrap.com/docs/5.0/components/dropdowns/#auto-close-behavior, but the same default behaviour for all dropdown arises.
I checked that I have bootstrap.bundle.min.js loaded so it's not a problem of Popper import (other behaviors such as positionning are working anyway).
As an exemple, here is some complete code I have some issue with. It's a simple copy of the mentioned site.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Codeply">
<title>Codeply simple HTML/CSS/JS preview</title>
<base target="_self">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css">
<style>/* build your own custom Bootstrap theme:
https://themestr.app
*/</style>
</head>
<body>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You are using beta(5.0.0-beta1) version of bootstrap 5. It is not stable version.
It is working fine with latest bootstrap version 5.1.3. Please use & try latest bootstrap version. check following.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside" style="margin: 0px;">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
I am using Bootstrap 5 with my Navbar. I have two Dropdown Links for my site and whenever I try to click on the page that holds them (ex. Reviews), it doesn't work. I don't believe I'm missing any Bootstrap links or jQuery to make the Dropdown work.
<div class="container-fluid"> <a class="navbar-brand" href="index.html"><img src="images-logo/logo.png" alt="Game Picker"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="news.html">News</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="previews.html" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Previews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" aria-current="page" href="#">Action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Another action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="reviews.html" id="navbarDropdownMenuLinkTwo" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reviews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkTwo">
<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>
</li></div></div></nav>
I want to check if the agent social URL exists or not. I get the data via API and in the render I check if it is loaded and try to return the data for this section, but got stuck at this.
if (isLoaded) {
return (
<section className="site-section" id="agents-section">
<div className="container">
<div className="row">
{agent.map(agent =>
<div className="col-md-6 col-lg-4 mb-4">
<div className="team-member">
<figure>
<ul className="social">
<li><a href={agent.facebook_url}><span className="icon-facebook" /></a></li>
<li><a href={agent.twitter_url}><span className="icon-twitter" /></a></li>
<li><a href={agent.linkedin_url}><span className="icon-linkedin" /></a></li>
<li><a href={agent.instagram_url}><span className="icon-instagram" /></a></li>
</ul>
<img src={agent.agent_photo} alt="Image" className="img-fluid" />
</figure>
<div className="p-3 bg-primary">
<h3 className="mb-2">{agent.agent_name}</h3>
<span className="position">{agent.agent_position}</span>
</div>
</div>
</div>
)}
</div>
</div>
</section>
)
}
You can use ternary operator ?: as shown in below code.
{
agent.facebook_ur && agent.twitter_url && agent.linkedin_url && agent.instagram_url ?
<figure>
<ul className="social">
<li><a href={agent.facebook_url}><span className="icon-facebook" /></a></li>
<li><a href={agent.twitter_url}><span className="icon-twitter" /></a></li>
<li><a href={agent.linkedin_url}><span className="icon-linkedin" /></a></li>
<li><a href={agent.instagram_url}><span className="icon-instagram" /></a></li>
</ul>
<img src={agent.agent_photo} alt="Image" className="img-fluid" />
</figure>
: null
}
I am trying to get a series of controls positioned vertically and centered horizontally. The controls are coming out fine, but when I cause the dropdown to drop down, the dropdown text appears left justified on the screen rather than under the centered dropdown control. I've spend a couple of hours on it and I can't get it right. Help would surely be appreciated. Here is what I am using:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">
</div>
You could solve this issue using css like i did here:
http://www.bootply.com/zck8H4EVt4
Just add this to your CSS:
.dropdown-menu {
left: 50%;
transform: translate(-50%, 0);
}
// EDIT:
Sorry, i've forgot about the btn-group class...
Just remove the CSS part from the first solution, add .btn-group to your dropdown and use .clearfix after your btn-group like i did here:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<div class="clearfix"></div>
<input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>
Working example: http://www.bootply.com/lryEFqtmdp
I have a dropdown which i need to keep the url intact on the parent so i put disable class, but when i open it on my mobile, it immediately goes to the url and it wont drop. Here's the code.
<div class="row">
<nav class="navbar navbar-default polo" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#polo-nav">
<span class="sr-only">
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="polo-nav">
<ul class="nav navbar-nav">
<li class="dropdown">Accueil
<ul class="dropdown-menu">
<li>Activites</li>
<li>Infrastructures</li>
</ul>
</li>
<li class="dropdown">Tournois
<ul class="dropdown-menu">
<?php
$this->db->select('tou_name,id');
$this->db->where('trashed',0);
$this->db->from('tbl_tournament');
$query = $this->db->get();
foreach ($query->result() as $row)
{
?>
<li><?=$row->tou_name?></li>
<?php
}
?>
</ul>
</li>
<li><a class="polo-sub" href="<?=base_url()?>leclub.html">Le Club</a></li>
<li><a class="polo-sub" href="<?=base_url()?>schedule.html">Calendrier</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/tarifs.html">Tarifs</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/partenaires.html">Partenaires</a></li>
<li><a class="polo-sub" href="<?=base_url()?>actualities/actualities.html">Actualites</a></li>
<li><a class="polo-sub" href="<?=base_url()?>polo/contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>