Can't space correctly using bootstrap - css

I'm trying to make responsive blog post. Everything works fine, but I don't like the way it looks. I would like to have a solution when my blog post with image itself would be centered. On desktop version it is less visible, but on mobile device it looks ugly... I'm currently using bootstrap 4, but if you got solutions with css, I also would be really happy!
I need something like on the image:
Desktop version
Mobile version
Here is my html + bootstrap model:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
And some code from base.html block:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Sidebar</h3>
<p class='text-muted'>Explore smth new today!
<ul class="list-group article-metadata">
<li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
<li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>

Finally, I solved this solution like this:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.slug %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.slug %}">Delete</a>
</div>
{% endif %}
</div>
</article>
<article class="media content-section">
<div class="media-body">
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}

Related

Diaz Canel Singao

I have these problem, I need to generate a col-md-4 from Django-Admin, the trouble is that I want to show other col-md-4 just if the previous col-md-4 get 10 items.
Please help me, is my tesis
<div class="col-lg-4">
<div class="single-price" style="border-radius: 8px;">
<ul class="price-list">
{% for doc in Documento %}
{% if 10 >= forloop.counter %}
<li class="d-flex align-items-center"><a href="{{ doc.documento.url }}" download=""
target="_blank" rel="noopener noreferrer">
<img src="{{ doc.ícono.url }}" alt="" style="width: 40px; margin-right: 10px;"> </a>
<span style="text-align: left;">{{ doc.nombre }}</span>
<!-- <a href="/static/descargables/Ctto-Marco-MAR-2022-.docx" download="true"
class="price-btn">Descargar</a> -->
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endfor %}

Grid and cards issues with Bootstrap

I almost finish a very important part in my Django project by creating panels which contains some cards. I'm using Bootstrap 3 (BS3) and I integrated cards from BS4 to BS3.
I'm getting an issue and I would like to get your mind because the behaviour is a little bit weird.
My issue :
As you can see in the animated picture below, there is an offset when I open dropdown from Publication n°1 and Publication n°2. It creates an offset with cards from the second row.
[![enter image description here][1]][1]
My question is : How I can rewrite bootstrap part in my code in order to make a normal behaviour ?
What I would like to get for each card:
This is what I would like for each card : open the card > make an offset to the entire row below
[![enter image description here][2]][2]
What I have and I don't want as behaviour :
And don't have a behaviour like that :
[![enter image description here][3]][3]
My code :
This is my entire code :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
{% for item in category.publication.all %}
{% if item.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
{% endfor %}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }} - {{ element.pub_id }}
{% if element.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-1">
<input type="checkbox" class="fakeRadio" name="DocumentChoice"
value="{{ item.code }}">
</td>
<td class="col-md-5 document-title">{{ item.title }}</td>
<td class="col-md-1 document-language"> {{ item.language }}</td>
<td class="col-md-1">
{% if item.format == 'pdf' %}
<img src="{% static 'app/img/pdf-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
{% if item.format == 'epub' %}
<img src="{% static 'app/img/epub-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
</td>
<td class="col-md-1 document-flag">
{% if item.publication.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% else %}
<span></span>
{% endif %}
</td>
<td class="col-md-1 document-cover">
{% if item.publication.cover %}
<a href="{{ item.publication.cover.url }}">
<img class="popup_image"
style="width:20px; height:20px; border-radius:2px;"
id="myImg_{{ item.id }}" src="{{ item.publication.cover.url }}">
</a>
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
And this is a simplified version from my previous code in order to try some things :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }}</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-5 document-title">{{ item.title }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I don't know if you need my css part, but I think the issue is maybe due to my bootstrap grid ?
Thank you !
That looks like a clearfix issue. Can you try adding this to your css:
.panel.panel-default.subpanel > .row > .col-md-4:nth-child(3n+1) {
clear: both;
}
Depending on your other code it might need some more variations for different screen sizes.

Adding class to images and videos with Summernote widget in Django 2

I'm looking for a way to add a class, which I could modify in css, to images and videos in both editor forms and html templates displaying the form. I'm using the SummernoteInplaceWidget() from django-summernote package and it's working fine except this feature.
I use bootstrap 4 with it.
Any ideas?
Thanks in advance.
forms.py:
from django.forms import ModelForm
from django_summernote.widgets import SummernoteInplaceWidget
from .models import Post
class PostFormModel(ModelForm):
class Meta:
model = Post
fields = ['title', 'content', 'image', ]
widgets = {
'content': SummernoteInplaceWidget(attrs={'class': 'summer-img-class'}),
}
post_form.html:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}
<div class="content-section">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Blog Post</legend>
{{ form|crispy }}
{% if form.image.errors %}
<div class="alert alert-danger">
{{ form.image.errors }}
</div>
{% endif %}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post</button>
</div>
</form>
{% block jquery %}
{{ form.media }}
{% endblock %}
</div>
{% endblock content %}
post_detail.html:
{% extends "blog/base.html" %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}
<article class="media content-section">
<div class="shadow-sm rounded row media-body">
<div class="col-md-3 col-sm-3 col-3 align-self-center">
<img class="rounded-circle article-img align-middle mx-auto d-none d-sm-block " src="{{ object.author.profile.image.url }}">
<img class="rounded-circle article-img-sm align-midle mx-auto d-block d-sm-none " src="{{ object.author.profile.image.url }}"">
</div>
<div class="col-md-9 col-sm-9 col-9">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ object.title }}</a></h2>
</div>
<div class="row media-body pt-3">
<div class="col-md-12">
{% if post.image %}
<img alt="" src="{{ object.image.large.url }}" class="post_image rounded mx-auto mb-2 d-block"/>
{% endif %}
<p class="article-content ml-3">{{ object.content|safe }}</p>
</div>
</div>
</div>
</article>
{% endblock content %}
I tried to add some styling to .article-content, it didn't have any effect, the same for this class in css (I imagine it can be more effectively):
.summer-img-class * {
max-width: 100%;
max-height: 400px;
object-fit: cover;
margin: auto;
}
Maybe it should be done with Jquery somehow, I don't know.

Twig {% if statement %} using Symfony 2

How can I access an entity attribute in Twig (using the Winzou Symfony2 tutorial on OpenClassroom)?
Category is an attribute of my class Advert which contains all my adverts. I just want to show an error message if there are no Advert entities.
Here is my accordion that lists "adverts" from my Advert entity. One accordion is for the category incident and the one other is for the category general.
<div class="well">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseGen">
<h3><i class="icon-chevron-right"></i> Incidents</h3>
</a>
</div>
<div id="collapseGen" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "incident" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<div>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
</div>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{# HERE I DONT KNOW HOW TO DO IT #}
{% else %} No Advert !
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseCo">
<h3><i class="icon-chevron-right"></i> Général</h3>
</a>
</div>
<div id="collapseCo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "general" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<div class="accordion-heading">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
My error message " No Adverts !" doesnt appears..
EDIT : According to Mitchel's answer, i've tried this :
{% endif %}
{% else %}<li>No Adverts</li>
{% endfor %}
I don't know why it doesn't work when one advert is in the other category...
{% for advert in listAdverts if advert.category == "incident" %}
{% if listAdverts is empty%}
<li>No Adverts</li>
{% endif %}
{% endfor %}
That code does not work.
I'm not sure to understand your question, but if so, you can maybe try a thing like this according to the documentation:
{% for user in users %}
<li>{{ user.username|e }}</li>
{% else %}
<li><em>no user found</em></li>
{% endfor %}
In Twig a for statement can have an associated else. It basically means that if the for has no results, the else is used. You should put the {% endif %} before the {% else %} and it should work.

Set a menu item active, and keep it in memory using TWIG and Symfony

I'm having a problem using Twig because I have a vertical sidebar used as a menu. When the user clicked on the menu item, it add an active class. But when the user change of page, active page disapear. I know this is the behavior expected but that's what I'm here. I wanted to know if someone have an idea to keep this active class in my layout when the user click on this item, so that, when he change of page, the menu will be as he desired (i.e. active or not)
Here is my layout.html.twig file :
<!DOCTYPE HTML>
<html>
<head>
{% block head %}
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %} AcreatMailing {% endblock title %}</title>
{% block js_head %}
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/jquery-3.1.1.min.js') }}"></script>
{% endblock js_head %}
{% block stylesheet %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link href="{{ asset('/bundles/front/css/style.min.css') }}" rel="stylesheet" />
{% endblock stylesheet %}
{% endblock head %}
</head>
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1">
<button class="hamburger">☰</button>
</div>
<div class="col-4 offset-1">
{%- block breadcrumb -%}{%- endblock -%}
</div>
<div class="col-6">
<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="100" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<span class="dropdown-item"><b>{{app.user.username}}</b></span>
<span class="dropdown-item">{{app.user.email}}</span>
{{ '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" id="addmessage" 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" id="viewNotSent" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagenotsent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberNotSent[0][1] }}</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" id="viewSent" data-parent="#sidebar" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagesent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberSent[0][1] }}</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" id="draft" 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 %}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
{% block footer %}
{% block footer_javascript %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/tether.min.js') }}"></script>
<script type="text/javascript" src="{{asset('bundles/front/components/moment/min/moment.min.js') }}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/bootstrap.min.js') }}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/mdb.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/components/jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/libraries.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/acreatmailingfront.min.js') }}"></script>
{% endblock footer_javascript %}
{% endblock footer %}
</html>
The sidebar is inside the {% block navbar %}.
Thanks all in advance.
You can use twig's if inside the class definition of each menu item.
If the current path matches the menu item's path, then print " active " inside the class html attribute.
I found the solution with one of my teamates. I used javascript and jquery to set cookies for the menu. And then if the cookie is set i add/remove the class for my menu. Thanks all by the way.

Resources