CODEWITHSUNDEEP
htmldjango
user3521180
user3521180

Reputation: 1130

Why extending base HTML to other templates not wokring?

I have a base.html that I want to extend to other templates. I started with contact.html. But the weird situation is that the moment I extend the base.html in contact.html, I loose my form fields. To re-assure that I can re-produce the issue, I removed the {% extends 'base.html' %} from the contacts.html and refresh the browser, I could see my form fields again. I have no idea what's missing. Below is the base.html content.

base.html

{% load staticfiles %}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap NavBar</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link href="{% static 'css/topics.css' %}" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation">
            <a class="navbar-brand" href="#">Bootstrap NavBar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'BLOG:contact' %}" target="_blank">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" id="Tutorials" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tutorials</a>
                        <ul class="dropdown-menu" aria-labelledby="Topics">
                            <li class="dropdown-item"><a href="{% url 'BLOG:Python' %}">Python</a></li>

                            <li class="dropdown-item dropdown">
                                <a class="dropdown-toggle" id="Django" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Django</a>
                                <ul class="dropdown-menu" aria-labelledby="Django">
                                    <li class="dropdown-item"><a href="#">Action 1.1</a></li>
                                    <li class="dropdown-item dropdown">
                                        <a class="dropdown-toggle" id="dropdown1-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1.1.1</a>
                                        <ul class="dropdown-menu" aria-labelledby="dropdown1-1-1">
                                            <li class="dropdown-item"><a target="_blank" href="http://www.google.com">Action 1.1.1 - Google</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                   <br>
                <form class="form-inline mt-2 mt-md-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
                </ul></div>
        </div>

        <main role="main" class="container">
            <div class="jumbotron text-center">
                <h1>Bootstrap NavBar</h1>
                <p class="lead text-info">NavBar with too many childs.</p>
            </div>
        </main>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

        <script src="{% static 'js/topics.js' %}"></script>

        </body>

</html>

contact.html

<div class="container">
  <form id="contact" action="" method="post">
    <h3>Quick Contact</h3>
    <h4>Contact us today, and get reply with in 24 hours!</h4>

    <fieldset>
      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
    </fieldset>

    <fieldset>
      <input placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>

    <fieldset>
      <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
    </fieldset>

    <fieldset>
      <textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
    </fieldset>

    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form>
</div>

Please help me find my mistake.Since I am working in Django environment, so I am also using jijna templating.

Upvotes: 0

Views: 994

Answers (1)

Anekan Devadoothan
Anekan Devadoothan

Reputation: 77

The reason is you hadn't declared the blocks yet. You should declare your block first and it should be like this.

base.html

{% load staticfiles %}
<html lang="en">
    <head>
        <!-- All your HEAD TAG stuffs -->
    </head>
    <body>
        <!-- Navbar Stuffs -->
                 
        {% block content %}

        <!-- Dyanamic contents will show here -->

        {% endblock content %}

        <!-- Scripts -->

        </body>

</html>

contact.html

{% extends "base.html" %}

{% block content %}

<div class="container">
  
  <!-- Contact HTML Code here -->
  
</div>

{% endblock content %}

N.B: You should also use a {% load static %} tag after the {% extends "base.html" %} tag to use static files.

Upvotes: 1

Related Questions