Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself.
Here is a snippet from my calendar.html file:
{% extends 'base.html' %}
{% block title %}
Calendar
{% endblock %}
{% block content %}
<div class="clearfix">
<a class="btn btn-info left" href="{% url 'cal:calendar' %}?{{ prev_month }}"> Previous Month </a>
<a class="btn btn-info right" href="{% url 'cal:calendar' %}?{{ next_month }}"> Next Month </a>
<a class="btn btn-info right" href="{% url 'cal:event_new' %}"> New Imputation </a>
</div>
{{calendar}}
{% endblock %}
Snippet from base.html:
<div class="wrapper">
{% include "header.html" %}
{% include "menu.html" %}
<div class="content-wrapper">
<section class="content-header">
{% block title_page %}{% endblock %}
</section>
<section class="content container-fluid">
{% block content %}
{% endblock %}
</section>
</div>
{% include "footer.html" %}
</div>
And here's a snippet from the views.py file for the calendar view:
Views.py:
@method_decorator(login_required(login_url='/userprofile/login/'), name='dispatch')
class CalendarView(generic.ListView):
model = Event
template_name = 'cal/calendar.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
d = get_date(self.request.GET.get('month', None))
cal = Calendar(d.year, d.month)
html_cal = cal.formatmonth(withyear=True)
context['calendar'] = mark_safe(html_cal)
context['prev_month'] = prev_month(d)
context['next_month'] = next_month(d)
return context
Upon inspection with F12, I noticed that the footer is breaking the layout:
<div class="clearfix">
<a class="btn btn-info left" href="/calendrier/calendar/?month=2020-6"> Previous Month </a>
<a class="btn btn-info right" href="/calendrier/calendar/?month=2020-8"> Next Month </a>
<a class="btn btn-info right" href="/calendrier/event/new/"> New Imputation </a>
</div>
<footer class="main-footer">
<div class="pull-right hidden-xs">
Version X.x
</div>
<strong>Copyright © 2019 <a href="#">CONDUENT</a>.</strong> All rights reserved.
</footer><div>
</div><table border="1" cellpadding="1" cellspacing="1" class="calendar">
The footer seems to be out of place according to the structure of the page. Let me know if you need to take a look at the CSS or if there are other details needed to address this issue.
My main focus is to have the footer back in its correct position :c