Server Side Swift: Navbar Toggle not working in Vapor 4 Leaf + Bootstrap
Question
Configurations:
Vapor 4 | Updated beta version & packages | macOS Catalina v.10.15.3 | XCode 11.4 beta 2 | Bootstrap CDN 4.4.1
I'm unable to toggle my navbar button. I'm not sure if it's a bug in Leaf. I've implemented Bootstrap and CSS in the right order. Try and run this code. Don't forget to resize your browser window to mobile or tablet view in order to show navbar toggle button. Here's my leaf code:
// base.leaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- <link rel="stylesheet" href="/styles/bootstrap.min.css"/>-->
<link rel="stylesheet" href="/fonts/fa/css/all.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="/styles/main.css"/>
<link rel="stylesheet" href="/styles/header.css"/>
<link rel="stylesheet" href="/styles/footer.css"/>
<title>#(metaContent.title)</title>
<meta name="description" content="#(metaContent.description)"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main>
#import("main")
</main>
<footer id="myFooter">
<div class="bg-secondary" style="height:3px;">
</div>
<div class="footer-copyright footer-brand">
<h6 class="mt-2 text-light">© 2020 Company. All Rights Reserved.</h6>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// index.leaf
#extend("base"):
#export("main"):
<div class="container mt-3">
<h1>#(metaContent.title)</h1>
<p>#(body.content)</p>
</div>
#endexport
#endextend
In Safari's Inspect element, my html document is rendered in the right order. But, I've no clue why the click on navbar toggle isn't working.
2 answers
solution1
3 2020-06-17 13:27:05
As far as I remember using Vapor 4 leaf renderer there is a bug about # . They are always interpreted as the beginning of a leaf tag.
The simplest workaround is to escape them with a \\ : data-target="#navbarCollapse" become data-target="\\#navbarCollapse"
solution2
0 2020-05-14 10:25:59
I believe there is a bug in Leaf parser, and the # in data-target="#navbarCollapse" gets misinterpreted. The way I have solved it is to change data-target to data-target=".navbarCollapse" and to modify class attribute of navbarSupportedContent div element from <div class="collapse navbar-collapse" id="navbarSupportedContent"> to <div class="collapse navbar-collapse navbarSupportedContent" id="navbarSupportedContent"> . Not the best of workaround, but it does the trick until the Leaf parser is modified.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.