Search code examples
djangotemplatesstylesextendsradix

Django template sidebar not rendering as it should

In a Django project, I have a side bar that is not rendering in the correct place. Instead of coming up on the right hand side of the content, as it does for the other pages that have similar content, the side bar in this case is at the very bottom. I cannot figure out how to move it, and have tried various things in the base.html and moving around the Django templating language block content.

Rendering the template (register.html) looks like this:

enter image description here

It should however look like this, as per the tutorial:

enter image description here

Relevant part of the base.html

<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>

</head>
<body>

<header class="site-header">
  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
    <div class="container">
      <a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarToggle">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
          <a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
        </div>
        <!-- Navbar Right Side -->
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="{% url 'socialmedia-login' %}">Login</a>
          <a class="nav-item nav-link" href="#">Register</a>
        </div>
      </div>
    </div>
  </nav>
</header>

register.html

{% extends "socialmedia/base.html" %}
{% block content %}

    <div class="content-section">
    <form method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="border-bottom mb-4">Hello: Register today!</legend>
        {{form.as_p}}
    </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Register</button>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">Signed up already? <a class="ml-2" href="#">Login</a> here</small>
    </div>
{% endblock content %}

views.py

#USERS (register) view.py

from django.shortcuts import render
from django.contrib.auth.forms import UserCreationForm
# Create your views here.

def register(request):
    form = UserCreationForm()
    return render(request, 'users/register.html',{'form':form})

Please note that the main2.css style sheet is referenced in the base.html and works fine on all the other pages except for this one. In the other pages the side bar renders correctly on the right hand side of the page.

Solution

  • The problem was a missing div, that compeltely escaped my attention.

    The register.html page can be re-written as the below. Note the divs, one of which was missing. I also sorted out the indentation which helps.

    {% extends "socialmedia/base.html" %}
{% block content %}
    <div class="content-section">
        <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Hello: Register today!</legend>
            {{form.as_p}}
        </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Register</button>
    </div>
    </form>
    <div class="border-top pt-3">
        <small class="text-muted">
            Signed up already? <a class="ml-2" href="#">Login</a>
            </small>
        </div>
    </div>
{% endblock content %}