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.