I am trying to add some logic to change attribute in class block. This is my initial code:
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
2022
</button>
So I am trying to implement something like: if current year equal to 2022 it have to be: class="accordion-button expand"
else
class="accordion-button collapsed"
I have tried to add something like this but of course it doesn't work:
<button class="accordion-button {% if {{now "Y"}}==2022 %} expand {% else %} collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
2022
</button>
How to fix it?
You are missing {% endif %}. And to use in the way you want, you should store the value in a variable. It returns a string, so we need to wrap the compared value in quotes:
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
{% now "Y" as current_year %}
<button
class="accordion-button {% if current_year == '2022' %}expand{% else %}collapsed{% endif %}"
type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
2022
</button>
</h2>
</div>
</div>
Related
I've been coding a website using bootstrap for most of the design. Up until around 2 days ago the website looked like this on Chrome:
[Link to screenshot] https://i.stack.imgur.com/JTkeO.png
The website still looks like that currently on Microsoft Edge (I haven't tried any other browsers yet), but on Chrome it currently looks like this: [Link to another screenshot] https://i.stack.imgur.com/giExv.png
Div tags are overlapping, the background is gone (which was done through custom CSS for the class "bg" in the code below), the sizing of the accordion is messed up and it doesn't work properly. Basically, the layout and design of the website is completely broken and I haven't changed the code at all. My Chrome is up to date so I don't believe that is the issue. Does anyone know what it could be?
Here is the code for the page in the screenshots above:
body, html {
height: 100%;
margin: 0;
}
.bg {
background-color: #FBAB7E;
background-image: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 50%, #b60f11 100%);
min-height: 100%;
background-size: cover;
}
.heading {
height: 250px;
}
.accordion-button:not(.collapsed)::after {
filter: brightness(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Making sure every page has the required stylesheets and responsive meta tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rayan's Online Portfolio{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="bg container-fluid">
<!-- A navbar at the top of every page -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-5">
<a class="nav-link" href="/" id="home">Home</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/about" id="about">About</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/projects" id="projects">Projects</a>
</li>
<li class="nav-item px-5">
<a class="nav-link" href="/contact" id="contact">Contact</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- A header which can be slightly modified for each page -->
<div class="container-fluid d-flex justify-content-center align-items-center flex-column heading">
<h1>Rayan's Online Portfolio</h1>
<h5>{% block page %}{% endblock %}</h5>
</div>
{% block body %}{% endblock %}
</div>
<!-- Bootstrap script for every page -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
{% extends "layout.html" %}
{% block page %}Projects{% endblock %}
{% block body %}
<div class="container">
<p>While I was learning to code in the summer of 2022, multiple people told me that the best way to learn was to do different coding projects. So as I was learning different things from online courses, I tried to implement that knowledge in the projects below. As you will see below, I wanted to carry out a variety of projects so I could learn about the different applications of coding and discover what I enjoyed doing. This page contains a short description about each project. If you would like to learn more about a particular project or see the code I wrote for it, you can visit the project's GitHub Repository which is linked to the name of each project. The projects are displayed in chronological order, from the one I started most recently down to my first ever coding project.</p>
<!-- Accordion will keep each project explanation so page is not too long -->
<div class="accordion" id="accordionExample">
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header border-dark" id="headingOne">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
This Website
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">This Website</a></h3></p>
<p>My latest project so far is this website, my online portfolio. I wanted to create a place where I could put all my hard work on display because a lot of the details that are included about projects on this website need to be left out on Resumes and other types of applications. Creating this taught me a lot about webpage design with HTML and CSS. It also made me more familiar with the different things I could do with Bootstrap. The back end for this website was relatively simple, although I did learn how to send emails from a web app (check out the Contact page).</p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
myJim
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">myJim</a></h3></p>
<p>myJim is a web app I am working on which allows people to create accounts, track their progress in the gym, and see the progress visually in the form of graphs that are generated by the data they input. I am using Python, Flask, and SQL along with HTML, CSS, and Javascript to implement this idea. So far, my main focus has been on getting the back end of the web app working which I have essentially finished. At this point users can register, login, and logout. They can also add data about the different exercises, weight, and reps they did on different days to an SQL database where the data for the web app is stored.</p>
<div class="container py-3"><p><img src="../static/myJim.png" class="img-fluid mx-auto"></p></div>
<p>Furthermore, they can see their progress over time visually with graphs generated by the matplotlib module for Python from the data in the SQL database.</p>
<div class="container py-3"><p><img src="../static/myJim3.png" class="img-fluid mx-auto"></p></div>
<p>I still need to make sure that users cannot mess up the web app with bad inputs into forms. However before I do that, I want to shift my focus onto the front end of the web app and make it look better.</p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Harvest Havoc
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Harvest Havoc</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Blackjack
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Blackjack</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
34
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">34</a></h3></p>
</div>
</div>
</div>
<div class="accordion-item bg-transparent border-dark">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed bg-transparent" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Cipher
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><h3><a class="link-dark" href="#">Cipher</a></h3></p>
</div>
</div>
</div>
</div>
</div>
<script>
let element = document.querySelector("#projects")
element.classList.add("active")
element.setAttribute("aria-current", "page")
/* Javascript to make changes to accordion button background when item is collapsed or open */
let accordion = document.querySelectorAll(".accordion-button");
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.target.classList.toggle("bg-transparent")
mutation.target.classList.toggle("text-dark")
observer.disconnect()
});
accordion.forEach(function(a) {
observer.observe(a, {
attributes: true,
attributeFilter: ["class"]
});
});
});
accordion.forEach(function(a) {
observer.observe(a, {
attributes: true,
attributeFilter: ["class"]
});
});
</script>
{% endblock %}
I have thoroughly researched this issue already, but all of the solutions are from an older version of Bootstrap, and they didn't help.
My problem is that when I press the button, the modal appears behind the background. All the solutions I've found say that the parent container/modal can't have fixed or relative position. However, my modal doesn't have a parent container and I don't have any custom CSS written for the modal.
I think the problem could be with the fact that I am using Django with this HTML file. Here is the code -
example.html
{% extends 'main/base.html' %}
{% load static %}
{% block title %}Example Title{% endblock %}
{% block fullscreen_content %}
<div id="map-canvas" style="height: calc(100% - 50px); width: 100%;"></div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
base.html
{% load static %}
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/flatly/bootstrap.min.css"> -->
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{% static 'style.css' %}" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
{% block header %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'shelter:index' %}">Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% with 'example example example' as tabs %}
{% for tab in tabs.split %}
<li class="nav-item {% if page == tab %}active{% endif %}">
{{ tab|title }}
</li>
{% endfor %}
{% endwith %}
</ul>
{% if request.user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
Log out
</li>
</ul>
{% endif %}
</div>
</nav>
{% block fullscreen_content %}{% endblock %}
<div class="container">
<div class="page">{% block content %}{% endblock %}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
{% block footer %}{% endblock %}
</body>
</html>
I removed/edited sensitive parts in the code or parts that aren't necessary, so there should hopefully be enough to go on. Thanks!
EDIT - Here is a screenshot
In your main CSS file, try setting the z-index of the backdrop to 1, the CSS below might help:
.modal-backdrop{
z-index: 1;
}
If you are comfortable themeing bootstrap in SASS, the following variables will do the trick:
$zindex-modal: 100001;
$zindex-modal-backdrop: 100000;
I did this so that my modal/backdrop would appear above my sticky navbar.
I am using Bootstrap version 4.1, there are no custom styles in my page. Here is the code for displaying buttons:
<div class="btn-group" role="group" aria-label="">
<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#listFilter" aria-expanded="false" aria-controls="listFilter">
<i class="fas fa-filter"></i> {% trans 'Filters' %}
</button>
The problem is that, style for a tag is not working, despite I can see it in browser inspector. What might cause such behavior?
You are using a button css class on an <a> tag just switch it to <button> no need for an <a>
Change your line to
<a href="{% url 'website_admin_create_user' %}">
<button class="btn btn-primary">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</button>
</a>
instead of
<a class="btn btn-primary" type="button" href="{% url 'website_admin_create_user' %}">
<i class="fas fa-user-plus"></i> {% trans 'Add user' %}
</a>
Found the problem: type="button" caused this mess, just remove it and everything work as expected.
This is probably some sort of silly misunderstanding, but I'm trying to include some Jinja code in my HTML file, as in this file which I found on github:
{% extends "bootstrap/base.html" %}
{% block title %}
Demo App
{% endblock %}
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='starter-
template.css')}}">
{% endblock %}
{% block content %}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
{% endblock %}
You'll see that the Jinja code is enclosed in the "{% ... %}." However, when I run this file in my web browser, I get the following:
As you can see at the top of the screenshot, instead of executing the Jinja code, the Jinja is being read as HTML text. How can this be fixed?
Thank you!
the jinja templates are not supposed to be viewed in browsers. flask will generate and serve proper html, generated from your templates, when requested.
On a phone sized screen, when I click the hamburger once, the navbar opens fine. When I try to close it, nothing happens - it's stuck. Where have I gone wrong? Here's my html:
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://{{base_url}}">My Teams</a>
</div>
<nav class="collapse navbar-collapse" id="teams-navbar-collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>
<a href="{% url 'profile_page' user.pk %}">
My Profile
</a>
</li>
<li>
Logout
</li>
</ul>
{% else %}
{% block login_button %}{% endblock %}
{% endif %}
</nav>
</div>
</header>
I would say this is actually an issue with jQuery Toggle. Please ensure jquery is set to toggle "collapsed". One of the ways bootstrap works is by adding/removing classes to buttons/divs/html elements to display them based on css. For example. Pretty Select dropdowns work by adding "open" to a specific div before or after the select button. Hense you can use jQuery to toggle that open when it's clicked. I hope this helps.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse">
<script type="text/javascript">
$( document ).ready(function() {
$("button.navbar-toggle").click(function(){
$("button.navbar-toggle").toggleClass("collapse");
});
});
</script>