'Django - Input boxes not styling properly when inheriting from base.html
I am creating a simple login page using Django & Tailwind.css.
My form was styling fine until I inherited a <nav> from base.html. When I did so, gray borders started appearing around my input boxes and the input boxes got slightly bigger.
The original layout:
The new layout (with base.html being inherited):
I'm not sure why this is occurring, because all of the code remains the same, I am just {% extends "base.html" %} at the top of my login.html
Here is my base.html code (contains the navar & responsive navbar):
<!DOCTYPE html>
<html class="screen-top">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{% block title %}{% endblock %}</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://shuffle.dev/vendor/icons/css/fontello.css?v=h7b" id="bs-base-css">
<style type="text/css" href="https://shuffle.dev/vendor/tailwind-flex/css/tailwind.min.css?v=bd4"></style>
<style type="text/css" href="https://shuffle.dev/vendor/tailwind-flex/css/tailwind.min.css?v=bd4"></style>
<style type="text/css" href="css2?family=Poppins:wght@400;500;600;700&display=swap"></style>
<link rel="stylesheet" href="https://shuffle.dev/static/build/css/shuffle-preview.3a553ecf.css">
<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />
<script src="https://shuffle.dev/vendor/tailwind-flex/js/main.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
{% block css %}
{% endblock %}
</head>
<body id="page" class="antialiased font-body bg-body text-body bg-[rgb(248,250,251)]">
<!-- NAVBAR -->
<div class="" id="content">
<section class="relative overflow-hidden">
<nav class="flex justify-between p-6 px-4" data-config-id="toggle-mobile" data-config-target=".navbar-menu"
data-config-class="hidden" style="background-color: #2a3342;">
<div class="flex justify-between items-center w-full">
<div class="w-1/2 xl:w-1/3">
<a class="block max-w-max" href="{% url 'home' %}">
<img class="h-8" src="https://i.ibb.co/LRCrLTF/Screenshot-2022-04-03-140946-removebg-preview.png"
alt="LOGO" data-config-id="auto-img-1-2" style="transform: scale(2); padding-left: 30px"> </a>
</div>
<div class="w-1/2 xl:w-1/3">
<ul class="text-slate-400hidden xl:flex xl:justify-center">
<li class="mr-12"><a class="text-slate-400 font-medium hover:text-white transition ease-in-out delay-150"
href="#" data-config-id="auto-txt-1-2" style=" font-size: 18px">About</a></li>
<li class="mr-12"><a
class=" text-slate-400 font-medium hover:text-white transition ease-in-out delay-150"
href="{% url 'classes' %}" data-config-id="auto-txt-2-2" style=" font-size: 18px">Classes</a></li>
<li class="mr-12"><a class=" hover:text-white font-medium text-slate-400 transition ease-in-out delay-150"
href="{% url 'resources' %}" data-config-id="auto-txt-3-2" style=" font-size: 18px">Resources</a>
</li>
<li><a class=" hover:text-white font-medium text-slate-400 transition ease-in-out delay-150" href="#"
data-config-id="auto-txt-4-2" style=" font-size: 18px" id="responsivehide">Upcoming</a></li>
</ul>
</div>
<div class="w-1/2 xl:w-1/3">
<div class="hidden xl:flex items-center justify-end"><a
class="inline-block py-2 px-4 mr-2 leading-5 text-slate-400 hover:text-white bg-transparent font-medium rounded-md transition ease-in-out delay-150"
href="{% url 'login' %}" data-config-id="auto-txt-5-2" style="font-size: 18px">Log In</a><a
class="inline-block py-2 px-4 text-sm leading-5 text-green-50 border-2 border-solid border-green-500 hover:bg-green-500 transition ease-in-out delay-200 font-medium focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md"
href="#" data-config-id="auto-txt-6-2" style="font-size: 15px">Sign Up</a></div>
</div>
</div>
<button class="navbar-burger self-center xl:hidden">
<svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
data-config-id="auto-svg-1-2">
<rect class="text-slate-400" width="32" height="32" rx="6" fill="currentColor"></rect>
<path class="text-coolGray-400"
d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z"
fill="currentColor"></path>
</svg></button>
</nav>
<!--NAVBAR ENDING-->
<!--Navbar script & styles-->
<script>
for (var i = 0; i < links.length; i += 1) {
links[i].addEventListener('click', function (e) {
e.preventDefault();
});
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i += 1) {
forms[i].addEventListener('submit', function (e) {
e.preventDefault();
}, true);
}
</script>
<style>
@media screen and (min-width: 0px) and (max-width: 1273px) {
.mr-12 {
display: none;
}
#responsivehide {
display: none;
}
}
</style>
<div class="navbar-menu hidden fixed top-0 z-50 left-0 w-full h-full bg-coolGray-900 bg-opacity-50">
<div class="fixed top-0 left-0 bottom-0 w-full w-4/6 max-w-xs bg-coolGray-900" data-config-id="toggle-mobile-2"
data-config-target=".navbar-menu" data-config-class="hidden">
</div>
</div>
<!--Hidden navbar-->
<div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<nav class="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto"
style="background-color: #2A3342;">
<div class="flex items-center mb-8 ">
<img class="h-8" src="https://i.ibb.co/LRCrLTF/Screenshot-2022-04-03-140946-removebg-preview.png" alt="LOGO"
data-config-id="auto-img-1-2" style="transform: scale(2); padding-left: 30px"> </a>
<a class="mr-auto text-3xl font-bold leading-none" href="#">
<img class="h-10" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
</a>
<button class="navbar-close">
<svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div>
<ul>
<li class="mb-1"><a
class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded"
href="#">About</a></li>
<li class="mb-1"><a
class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded"
href="#">Classes</a></li>
<li class="mb-1"><a
class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded"
href="#">Recources</a></li>
<li class="mb-1"><a
class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded"
href="#">Upcoming</a></li>
<li class="mb-1"><a
class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded"
href="#">Contact Us!</a></li>
</ul>
</div>
<div class="mt-auto">
<div class="pt-6"><a
class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-slate-400 hover:bg-gray-100 rounded-l-xl rounded-t-xl transition ease-in-out delay-150 text-white bg-slate-700 hover:bg-slate-400 focus:ring-4 focus:outline-none focus:ring-slate-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-slate-600 dark:hover:bg-slate-700 dark:focus:ring-slate-800"
href="{% url 'login' %}">Sign In</a><a
class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-green-400 hover:bg-green-100 rounded-l-xl rounded-t-xl transition ease-in-out delay-150 text-white bg-green-700 hover:bg-green-400 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-base px-6 py-3.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
href="#">Sign Up</a></div>
<p class="my-4 text-xs text-center text-gray-400">
<span>© 2022 All rights reserved.</span>
</p>
</div>
</nav>
</div>
{% block content %}
{% endblock %}
{% block js %}
{% endblock %}
</section>
</div>
</body>
</html>
And here is my login.html (contains the login form):
{% extends "base.html" %}
{% block title %}Saroga | Login {% endblock %}
{% block content %}
<section class="bg-slate-900">
<div class="flex flex-wrap h-screen">
<div class="pt-7 lg:pt-16 pb-6 w-full lg:w-1/2" >
<div class="max-w-md mx-auto">
<div>
<div class="mb-7 px-3">
<span class="text-gray-400 text-xl ">Join a yoga session today!</span>
<h3 class="text-3xl font-bold text-white" style="padding-top: 3%">Login to your account</h3>
</div>
<form action="" method="POST">
{% csrf_token %}
<div class="flex flex-wrap">
</div>
<label for="username" class = "ml-2 text-green-500">Username:</label>
<div class="mb-3 mt-1 flex p-4 mx-2 bg-gray-800 rounded">
<input class="w-full text-medium text-gray-50 bg-gray-800 outline-none " id = "username" name="username" type="text" placeholder="ex: username"
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#d4d4dc" fill="none" stroke-linecap="round" stroke-linejoin="round" style = "transform: scale(1.1) ;">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
</svg>
</button>
</div>
<label for="username" class = "ml-2 text-green-500">Password:</label>
<div class="mb-6 flex p-4 mx-2 bg-gray-800 rounded mt-1">
<input class="w-full text-medium text-gray-50 bg-gray-800 outline-none" type="password" name="password" placeholder="**********">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#d4d4dc" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</button>
</div>
<div class="px-3 text-center">
<button class="mb-2 w-full py-4 bg-green-500 hover:bg-green-700 rounded text-sm font-extrabold text-base text-gray-50 transition duration-200 " style="margin-bottom: 7%">Log In!</button>
<span class="text-gray-400 text-md ">
<span>Don't have an account?</span>
<a class="text-green-600 hover:underline" href="#">Create One Today!</a>
</span>
<p class="mt-16 text-md text-gray-400"><a class="text-green-600" href="#">Please read our</a> <a class="underline hover:text-gray-500" href="{% url 'privacyPolicy'%}">Privacy Policy</a> and <a class="underline hover:text-gray-500" href="{% url 'termsOfUse'%}">Terms of Use</a></p>
</div>
</form>
</div>
</div>
</div>
<div class="hidden lg:block relative w-full lg:w-1/2 bg-green-600">
<div class="absolute bottom-0 inset-x-0 mx-auto mb-12 max-w-xl text-center" style="z-index: 10;">
<img class="lg:max-w-xl mx-auto" src="https://i.ibb.co/7pH88PM/Woman-in-yoga-pose-removebg-preview-removebg-preview-1-1.png" style="position: relative; bottom: 150px">
<h2 class="mb-2 text-2xl text-white font-bold" style="position: relative; bottom: 100px">"Yoga shapes the soul, the mind, and the body"</h2>
<div class="max-w-lg mx-auto">
<p class="mb-6 text-gray-50 leading-loose" style="position: relative; bottom: 70px">Yoga is a truly benefical activity, packed with fun, simplicity, and flexibility. Join a yoga session today or visit the <a href = "{% url 'resources'%}" class="underline decoration-slate-500 font-bold decoration-4" > resources</a> page to learn more! </p>
</div> <script> for (var i = 0; i < quoteList.length; i ++) {return yoga_app.quote(i); } </script>
</div>
</div>
<div class="lg:hidden bg-green-600 w-full">
<div class="py-10 px-3 text-center" style="z-index: 10;">
<h2 class="mb-2 text-2xl text-white font-bold">"Yoga shapes the soul, the mind, and the body"</h2>
<p class="mb-6 text-gray-50 leading-loose">Yoga is a truly benefical activity, packed with fun, simplicity, and flexibility. Join a yoga session today or visit the <a href = "{% url 'resources'%}" class="underline decoration-slate-500 font-bold decoration-4" > resources</a> page to learn more!</p>
</div>
</div>
</div>
</section>
{% endblock %}
{% block js %}
<script>
for (var i = 0; i < links.length; i += 1) {
links[i].addEventListener('click', function (e) {
e.preventDefault();
});
}
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i += 1) {
forms[i].addEventListener('submit', function (e) {
e.preventDefault();
}, true);
}
</script>
{% endblock %}
{% block css %}
<style>
@media screen and (min-width: 0px) and (max-width: 1272px) {
.mr-12 { display: none; }
#responsivehide { display: none; }
}
</style>
{% endblock %}
Can someone please help me find out why the input boxes are styling weirdly, and how I can solve it?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|