Question posted in 
I am trying to use a template to be able to reuse a flexbox across multiple pages; rather than reuse the code on each page. However, rather than getting the flexbox I get:
If I just render the html as a page to be sure the flexbox works I get the expected output:
My html templates are all located in:
/Resilience_Radar/Resilience_Radar_App/templates/Resilience_Radar_App/
I setup the layout.html file to include the stylesheet defining the container and added teh templates tags:
<!DOCTYPE html>
<html lang = "en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="styles.css">
<title>Resilience</title>
</head>
<body>
<h1>Risk Resilience</h1>
{% block linesofoperation %}
{% endblock %}
</body>
</html>
I the created a file linesofoperation.html that contained the desired code to use in the block:
{% extends "layout.html" %}
{% block linesofoperation %}
<div class="container" style="top: 10%;">
<div class="item_LoO_Name">
<div class="t1">LoO</div>
<div class="t2">Implement, maintain and improve a
business countinuity management system</div>
</div>
<div class="space"></div>
<div class="item">Context of the Organization</div>
<div class="space"></div>
<div class="item" style = "background-color:gray">Leadership</div>
<div class="space"></div>
<div class="item" >Policy</div>
<div class="space"></div>
<div class="item">Planning</div>
<div class="space"></div>
<div class="item">Support</div>
<div class="space"></div>
<div class="item">Operation</div>
<div class="space"></div>
<div class="item">Management Review</div>
<div class="space"></div>
<div class="item">Improvement</div>
<div class="space"></div>
<div class="triangle-right"></div>
<div class="spaceblank"></div>
<div class="item_LoO_Name" style="background-color: white; color: black;">
<div class="t1">Outcome</div>
<div class="t2">Protect against, reduce the likelihood of the occurrence of,
prepare for, respond to and recover from disruptions when they arise</div>
</div>
</div>
{% endblock linesofoperation %}
Here’s my views.py
def leadership(request):
return render(request, "Resilience_Radar_App/leadership.html")
def linesofoperation(request):
return render(request, "Resilience_Radar_App/linesofoperation.html")
def layout(request):
return render(request, "Resilience_Radar_App/layout.html")
and my urls.py in the app
from django.urls import path
from . import views
urlpatterns = [
path("", views.leadership, name="leadership"),
path("", views.RadioButtonForm, name="RBF"),
path("linesofoperation/", views.linesofoperation, name = "LoO")
and in the main folder:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("Resilience_Radar_App/", include("Resilience_Radar_App.urls"))
I was trying to get the layout.html to be the template for a number of pages that all would include the flexbox graphic with different content on each page.
One answer I found gave an error as:
Finally, I found the mistake:
I refered in my view to the "parent" file (base.html) instead of the "child" file (landingPage.html).
But no code so I am not sure what the error was.
2
Answers
I had corrected the mistakes :-
layout.html
linesofoperation.html
You’re doing reverse extension. What you want is
linesofoperationtemplates code insidelayout.html, But you’ve includedlayout.htmlinlinesofoperation. Now when you do this what actually happens is the htmllinesofoperationtemplate can accesslayout.html‘s code, but not vice versa.To fix this, use the below code:
layout.html:
linesofoperation.html