I have a dropdown menu using boostrap card that look like this :
I set z-index property to 1000 for the card div, position absolute. This card is in a horizontal menu at the top of my page with a position fixed. My body have a relative position and my div with the content of my page have a relative position too.
This is the render of my page :
And there is my HTML code :
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1 col-sm-1">
<button class="hamburger">☰</button>
</div>
<!--<div class="col-1 col-sm-1 col-lg-1 offset-lg-2" id="spanSearch">
<h4><span class="badge indigo hide">{# block badge_research %}{% endblock #}</span></h4>
</div>
<div class="col-2 offset-2 col-sm-2 offset-sm-3 col-md-2 offset-md-3 col-lg-2 offset-lg-3">
<div class="search d-inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
</div>
!-->
<div class="col-7 col-sm-6 col-md-6 col-lg-6 offset-lg-5">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="200" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'acreat.mailing.nav.myaccount'|trans }}
{{ 'acreat.mailing.nav.changepassword'|trans }}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
{{'acreat.mailing.admin.impersonalisation'|trans}}
{% endif %}
</div>
</div>
<div class="card-footer text-center">
{{ 'acreat.mailing.nav.logout'|trans }}
{% else %}
{{ 'acreat.mailing.nav.login'|trans }}
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span>
<i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagenotsent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberNotSent[0][1] }}</span>
</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagesent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberSent[0][1] }}</span>
</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span>
</i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span>
<div class="collapse show no-escape" id="menu4">
{{ 'acreat.mailing.nav.administrationlist'|trans }}
{{ 'acreat.mailing.nav.administrationaccount'|trans }}
{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}
{{ 'acreat.mailing.nav.administrationparameters'|trans }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
{%- block breadcrumb -%}{%- endblock -%}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
Thanks for the help
You should set z-index for fixed parent element, not for card
Related
I have a project where I have a paginated nav-tab with bootstrap.
The problem is that, anytime I refresh the page or I change the page with my pagination buttons, the active element is always the element n° 1 of the list.
This is probably due to the fact that I need to activate it upon opening the page with an if condition within the forloop. Let me post some code to be more clear
template
<input type="hidden" id="quizProfileId" value="{{pk}}">
<div class="card">
<div class="card-body">
<h4 class="card-title ms-3">New {{quiz_attempt.question.question_subject}} Quiz</h4>
<div class="row">
<div class="col-md-9">
<div class="tab-content text-muted mt-4 mt-md-0" id="v-pills-tabContent">
{% for quiz in quizzes %}
<div class="tab-pane {% if forloop.counter == 1 %}active{% endif %} ms-3 questionsObj" id="question{{quiz.question_draft.question.id}}" value="{{quiz.question_draft.question.id}}">
<h5 class="text-dark">{{quiz.question_draft.question.text}}</h5>
<div class="list-group mt-3">
{% for image in quiz.question_draft.question.questionimage_set.all %}
<a href="{{image.image.url}}" target="_blank">
<img src="{{image.image.url}}" alt="" width="100px" height="100px">
</a>
<br>
{% endfor %}
{% for answer in quiz.question_draft.answerdraft_set.all|shuffle %}
<a href="#"
data-pk="{{quiz.question_draft.question.id}}"
id="answer{{answer.answer.id}}" data-answerId="{{answer.answer.id}}"
class="
list-group-item answer question{{quiz.question_draft.question.id}} list-group-item-action
{% if quiz.question_draft.is_answered == True and answer.answer.is_correct == True %}bg-success{% endif %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success disabled
{% elif answer.is_answered == True and answer.is_correct == False %}bg-danger disabled
{% elif quiz.question_draft.is_answered == True %} disabled
{% endif %}
">
<b>{{forloop.counter0|to_char}}</b>    {{answer.answer.text}}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group mt-3 mb-3">
{% if quiz_profile.is_completed != True %}
<form id="finishQuiz" action="{% url 'quiz:finish_test' pk=pk %}" method="get">
<button type="submit" class="btn btn-sm btn-success" id="finishButton" >Finish Test</button>
Save
Cancel Test
</form>
{% else %}
Quiz Report
{% endif %}
</div>
</div>
<div class="row">
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
{% for quiz in pages %}
<a class="btn btn-sm btn-outline-secondary custom m-1
{% for answer in quiz.question_draft.answerdraft_set.all %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success{% endif %}
{% endfor %}
{% if quiz.question_draft.is_correct == False %}bg-danger{% endif %}
{% if forloop.counter == 1 %}active{% endif %} "
id="questionButton{{quiz.question_draft.question.id}}"
data-bs-toggle="pill" href="#question{{quiz.question_draft.question.id}}">{{ pages.start_index|add:forloop.counter0 }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-9">
</div>
<div class="col-md-3">
<ul class="pagination">
{% if pages.has_previous %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.previous_page_number }}"><i class="fas fa-angle-double-left"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
</li>
{% endif %}
{% for i in paginator.page_range %}
<li class="page-item {% if pages.number == i%} active {% endif %} %}" >
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ i }}" >{{i}}</a>
</li>
{% endfor %}
{% if pages.has_next %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.next_page_number }}" ><i class="fas fa-angle-double-right"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
I think that in particular {% if forloop.counter == 1 %}active{% endif %} is the main reason of this problem. On the other side, I don't know how to give the class active only to the first element when I load the page for the first time.
And in the same time, I would like to load the first element of the second page, when I load the second page and so on.
I have django template file called card.html
In this file the anchor tag is on the outside.
<a class="url d-block" href="{% if content_type == 'book' %} {% url 'book' content.id|default:1 %} {% else %} {% url 'article' content.id|default:1 %} {% endif %}">
<div class="card d-flex flex-column border border-1 rounded">
<div class="p-5 bg-light">
<img src="{{ content.thumbnail }}" class="thumbnail img-fluid rounded">
</div>
<div class="flex-grow-1 p-4 border-top border-1">
<h3 class="category fs-5 text-secondary">{{ content.category.first }}</h3>
<h2 class="title fs-4 mb-2 text-dark">{{ content.title }}</h2>
{% if content_type == "book" %}
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q={{content.book_author|default:''}}">By {{ content.book_author }}</a>
<h3 class="author fs-5 text-dark">Summarized by {{ content.author }}</h3>
{% else %}
<h3 class="author fs-5 text-dark">Created by {{ content.author }}</h3>
{% endif %}
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">{{ content.date_created }}</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>
</a>
card.html is included in this template (the div is inside a body).
<div id="list-container" class="d-flex flex-wrap justify-content-center gap-4 pb-5 px-5">
{% for content in content_list %}
{% include "app/card.html" with visibility="visible" %}
{% empty %}
<h2>No {{ content_type }} for now..</h2>
{% endfor %}
</div>
When rendered, it looks like this.
The anchor tag somehow close by itself and got inside the div.
<a class="url" href=" /books/1 "></a>
<div class="card d-flex flex-column border border-1 rounded">
<a class="url" href=" /books/1 ">
<div class="p-5 bg-light">
<img src="img.jpg" class="thumbnail img-fluid rounded">
</div>
</a>
<div class="flex-grow-1 p-4 border-top border-1">
<a class="url" href=" /books/1 ">
<h3 class="category fs-5 text-secondary">Example Category</h3>
<h2 class="title fs-4 mb-2 text-dark">Title</h2>
</a>
<a class="book-author fs-5 fw-bold" href="https://www.google.com/search?q=Name">By Name</a>
<h3 class="author fs-5 text-dark">Summarized by Archer</h3>
</div>
<div class="flex-shrink-1 pt-3 d-flex justify-content-evenly border border-1">
<p class="date-created d-inline">May 3, 2022, 9 a.m.</p>
<i class="fa-solid fa-star mt-1"></i>
<i class="fa-solid fa-ellipsis-vertical mt-1"></i>
</div>
</div>
You cannot use <a> tag inside <a> tag. HTML don't allow nested tag.
You can use onclick event but you have to check with javascript which element clicked because parent element is a wrapper.
I made a carousel with bootstrap 4 like the following:
{% if events %}
<div class="text-center my-3">
<h3 class="font-weight-bold pb-4 mb-0 text-center">Events</h3>
<div class="carousel slide my-4" data-interval="false" id="carousel-1">
<div class="carousel-inner">
{% for item in events %}
<div
{% if forloop.counter0 == 0 %}
class="carousel-item active "
{% else %}
class="carousel-item "
{% endif %}>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 ml-auto">
<div class="text-right ">
<a class="text-dark" href="{% url 'events' %}">
<div>
<h3 class="text-dark" >{{ item.title }}</h3>
<p class="text-dark" style="color: #F4F4F4;" > {{item.date}} </p>
<p class="text-dark" > {{item.description|safe}} </p>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 mr-auto">
<img class="img-fluid text-center" style="max-height: 25vh;" src="{{ item.cover.url }}" alt="image cap">
</div>
</div>
</div>
{% endfor %}
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"><i class="text-dark fas fa-chevron-left"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"><i class="text-dark fas fa-chevron-right"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
{% for item in events %}
<li data-target="#carousel-1" data-slide-to="{{ forloop.counter0 }}"
{% if forloop.counter0 == 0 %}
class="active text-dark"
{% else %}
class="text-dark"
{% endif %}
></li>
{% endfor%}
</ol>
</div>
</div>
{% endif %}
I want the carousel-indicator to have a top margin so that it doesn't overlap over the content. since I'm not showing images, the indicators are not suitable if they lay over the content.
I added
<style>
.carousel-indicators{
margin-top: 50px;
}
</style>
but it is not working.
I also tried to add margin-top to bootstrap.min.css, but it didn't work either.
any ideas?
The .carousel-indicators element is absolute positioned at the bottom of the .carousel so top margin will do nothing. Instead override the bottom value of 0 with a negative value to move it below the .carousel
.carousel-indicators{
bottom: -50px;
}
Django with Bootstrap 3
I am working on a dashboard view for an FAQ system. I have set up the articles to be grouped by section. The section names are the headers in a list-group that when clicked will expand another list-group containing all the articles related to that group.
The issue that I am having is that I would like to set up the collapse to work like an accordion. I have followed bootstrap 3’s guide to accomplish this but when I click a new section open none of the prior open sections collapse close. I have exhausted other guides but the code looks correct yet the accordion functionality is not working.
My code:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
You have to wrap each section with:
<div class="panel"></div>
So your html would look like the following:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<div class="panel">
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Hope this helps!
{%if collection.title == "Meat"%}
{% if collection.image %}<div class="collection-image" style="background-image: url('{{ collection.image | img_url: '1024x1024' }}'); max-height:400px; "> {% endif %}
<div class="collection-title text-center" style="padding: 50px 0;">
<h1 class="collection-text--headline title text-center" style="margin-top:30px;">{{ collection.title }}</h1>
{% if collection.description.size > 0 %}
<div class="collection-text--body text-center rte large--three-fifths push--large--one-fifth">
<h4>{{ collection.description }}</h4>
</div>
{% endif %}
</div>
<div class="text-center" style="margin-top: -40px;
padding-bottom: 100px;">
<a href="http://www.greensburymarket.com/collections/all" class="btn btn--large btn--splash uppercase sec-col-button" >Learn More</a>
</div>
{% if collection.image %}<div class="collection-image-overlay"></div>
</div>
{% endif %}
know this is a stupid question but I am stumped. tried moving things around. No idea why this doesnt work