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:
https://ibb.co/vXxgrH0
The new layout (with base.html being inherited):
https://ibb.co/QCsvKmz
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?
Related
Am trying to share posted objects on list view but each time that I click on the share button which redirect me to share_form.html after typing into the shared textarea and submit the form it doesn't submit the shared object form, unless I use context variable {{ form }} before the object could be shared, why is it that when I use my custom form it doesn't submit the shared post? but rather when i do say {{ form }} then it's able to share the post?
Here is my view to share post
def share_post(request, pk):
original_post = Post.objects.prefetch_related('postimage_set').get(pk=pk)
form = ShareForm(request.POST, request.FILES)
if form.is_valid():
new_post1 = Post(
shared_body = request.POST.get('description'),
description = original_post.description,
username = original_post.username,
date_posted = original_post.date_posted,
video = original_post.video,
shared_on = datetime.now(),
shared_user = request.user)
new_post1.save()
for image in original_post.postimage_set.all():
new_post = PostImage(post=new_post1,
username=original_post.username,
image=image.image)
new_post.save()
return redirect('feed:feed')
ctx = {'form':form,'original_post':original_post}
return render(request,'feed/share_form.html', ctx)
My django form model to share post!
class ShareForm(forms.Form):
body = forms.CharField(label='',widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))
My html form to share post
<div class="main_content">
<div class="mcontainer">
<div class="md:flex md:space-x-6 lg:mx-16">
<div class="space-y-5 flex-shrink-0 md:w-7/12">
<div class="card lg:mx-0 uk-animation-slide-bottom-small">
<form method="POST" action="" enctype="multipart/form-data">
<div class="flex space-x-4 mb-5 relative">
<img src="{{ request.user.profile_image.url }}" alt="" class="rounded-full shadow w-12 h-12">
<div class="flex-1">
<form action="" method="POST" for='id_shared_body' enctype="multipart/form-data" >
{% csrf_token %}
<div class="grid md:grid-cols-2 gap-4">
<div class="col-span-2">
<textarea name="shared_body" id="id_shared_body" cols="30" rows="6" class="bg-gradient-to-b from-gray-100 to-gray-100"></textarea></div>
<a href="#" type="submit" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<div class="uil-share-alt mr-1" type="submit"></div><button>Share Post</button></a>
</div>
</form>
</div>
</div>
<!-- post header-->
<div class="flex justify-between items-center lg:p-4 p-2.5">
<div class="flex flex-1 items-center space-x-4">
<a href="#">
<img src="{{original_post.username.profile_image.url }}" class="bg-gray-200 border border-white rounded-full w-10 h-10">
</a>
<div class="flex-1 font-semibold capitalize">
{{original_post.username.get_full_name}}
<div class="text-gray-700 flex items-center space-x-2"> <span> {{ original_post.date_posted|timesince }} </span> <ion-icon name="people"></ion-icon></div>
</div>
</div>
<div>
<i class="icon-feather-more-horizontal text-2xl hover:bg-gray-200 rounded-full p-2 transition -mr-1 dark:hover:bg-gray-700"></i>
<div class="bg-white w-56 shadow-md mx-auto p-2 mt-12 rounded-md text-gray-500 hidden text-base border border-gray-100 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700"
uk-drop="mode: click;pos: bottom-right;animation: uk-animation-slide-bottom-small">
<ul class="space-y-1">
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-edit-alt mr-1"></i> Edit Post
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-comment-slash mr-1"></i> Disable comments
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 hover:bg-gray-200 hover:text-gray-800 rounded-md dark:hover:bg-gray-800">
<i class="uil-favorite mr-1"></i> Add favorites
</a>
</li>
<li>
<hr class="-mx-2 my-2 dark:border-gray-800">
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 text-red-500 hover:bg-red-100 hover:text-red-500 rounded-md dark:hover:bg-red-600">
<i class="uil-trash-alt mr-1"></i> Delete
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="p-3 border-b dark:border-gray-700">
{{ original_post.description }}
</div>
{% if original_post.video %}
<div class="w-full h-full">
<video width="650" height="200" controls>
<source src="{% static original_post.video.url %}" >
</video>
</div>
{% endif %}
<div class="grid grid-cols-2 gap-2 p-2">
{% for p in original_post.postimage_set.all %}
{% if forloop.counter == 1 %}
<a href="{{ p.image.url }}" class="col-span-2">
<img src=" {{ p.image.url }} " alt="" class="rounded-md w-full lg:h-71 object-cover" >
</a>
{% endif %}
{% if forloop.counter == 2 %}
<a href="{{ p.image.url }}">
<img src="{{ p.image.url }} " alt="" class="rounded-md w-full h-full">
</a>
{% endif %}
{% if forloop.counter == 6 %}
<a href="{{ p.image.url }}" class="relative">
<img src=" {% if forloop.counter == 6 %}{{ p.image.url }}{% endif %}" alt="" class="rounded-md w-full h-full">
<div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
</a>
{% else %}
<a href="{{ p.image.url }}" class="relative" hidden>
<img src=" {% if forloop.counter == 3 %}{{ p.image.url }}{% endif %}" alt="" class="rounded-md w-full h-full">
<div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
</a>
{% endif %}
{% endfor %}
</div>
<div class="p-4 space-y-3">
<div class="flex space-x-4 lg:font-bold">
<a href="#" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-100 dark:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg>
</div>
<div> Like</div>
</a>
<a href="#" class="flex items-center space-x-2 flex-1 justify-end">
<div class="p-2 rounded-full text-black lg:bg-gray-100 dark:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="22" height="22" class="dark:text-gray-100">
<path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd" />
</svg>
</div>
<div> Comment</div>
</a>
</div>
{% for comment in original_post.g_comments.all %}
<div class="border-t py-4 space-y-4 dark:border-gray-600">
<div class="flex">
<div class="w-10 h-10 rounded-full relative flex-shrink-0">
<img src="" alt="" class="absolute h-full rounded-full w-full">
</div>
<div>
<div class="text-gray-700 py-2 px-3 rounded-md bg-gray-100 relative lg:ml-5 ml-2 lg:mr-12 dark:bg-gray-800 dark:text-gray-100">
<p class="leading-6">{{comment}} <i class="uil-grin-tongue-wink-alt"></i> </p>
<div class="absolute w-3 h-3 top-3 -left-1 bg-gray-100 transform rotate-45 dark:bg-gray-800"></div>
</div>
<div class="text-xs flex items-center space-x-3 mt-2 ml-5">
<i class="uil-heart"></i> Love
Replay
<span> 3d </span>
</div>
</div>
</div>
</div>
Veiw 8 more Comments
<div class="bg-gray-100 rounded-full relative dark:bg-gray-800 border-t">
<input placeholder="Add your Comment.." class="bg-transparent max-h-10 shadow-none px-5">
<div class="-m-0.5 absolute bottom-0 flex items-center right-3 text-xl">
<a href="#">
<ion-icon name="happy-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
<a href="#">
<ion-icon name="image-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
<a href="#">
<ion-icon name="link-outline" class="hover:bg-gray-200 p-1.5 rounded-full"></ion-icon>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</form>
So after i had taken sometime to carefully analyzed the issue i had stable on a solution, actually the problem was coming from the form model:
this where the problem was
class ShareForm(forms.Form):
body = forms.CharField(label='',widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))
Instead i should have than something like this, i had omitted the description field, which was where my problem was !
class ShareForm(forms.Form):
description = forms.CharField(
label='',
widget=forms.Textarea(attrs={
'rows': '3',
'placeholder': 'Say Something...'
}))
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?
I have the search input element and when I view it on mobile it goes beyond the width of the screen. I'm not sure why:
<template>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<div class="relative">
<input class= "bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
Any help is appreciated.
EDIT:
I tried to remove styles that set padding:
<template>
<div id="app" class="bg-gray-200 ">
<section class="flex justify-between bg-gray-800 ">
<div class=" ">
<input class= "bg-gray-900 "
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
but it didn't work.
I'm looking to solve it with tailwind classes, without resorting to raw css solutions.
It's still not clear what's setting the width on the input (could simply be user-agent/browser default), but overriding it helps:
.flex input { /* or put a custom class on your input, such as input-flex */
min-width: 0;
}
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
Turns out you can use the w-full fluid width class to similar effect:
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="w-full bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
You could target smaller screens with the sm modifier, as sm:w-full.
The input break is due to the padding you added.
It has 3rem padding-rigth, and when the screen is smaller, the component is larger than the width.
You should decrease the size of your padding.
The ideal would be to decrease the padding, and try to work with a text-indent in css.
.flex input{
text-indent: 10px;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="app" class="bg-gray-200 antialiased">
<section class="grid grid-cols-2 bg-gray-800 px-3 py-3 ">
<div class="relative">
<input class="bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
</div>
<div class="text-right">
<button>Filters</button>
</div>
</section>
</div>
You need to handle the responsive variant classes and flex-1 will set the full width for the <input> element for this:
<div>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 col-gap-2">
<input class="block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black " placeholder="Search by keywords"/>
<button class="block text-gray-100">
<span class="hidden md:block">Filters</span>
<span class="md:hidden">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
</svg>
</span>
</button>
</section>
</div>
</div>
Checkout the code here : Example Code and Output
With the help of one of the answers here I found an answer which I believe is a better solution than setting the divs width:
https://play.tailwindcss.com/R474hCHy19
What I did was simply removed the <div class="relative"> so that the input element is now directly inside the section element. And then I added overflow-auto (to enforce all elements to stay within the screen width) and flex-1 (to force input element to fill all available space when the screen width increases) classes to the input element.
<section class="flex justify-between col-gap-4 bg-gray-800 px-2 py-3 ">
<input class= "flex-1 overflow-auto bg-gray-900 text-white px-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
<button class="px-4 bg-gray-700 ">Filters</button>
</section>
TailwindCSS Search Input Group Example:
CodePen: Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50">
<div class="col-start-2 col-span-4">
<span class="z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</span>
<div class="flex justify-between">
<input type="search" name="search" id="search" placeholder="Search Item..." class="px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border" />
<button type="submit" class="w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600">Search</button>
</div>
</div>
</div>
I'm using Tailwind framework to build a Dropdown component.
I'm trying to extend the div of the dropdown with the contents of it. As the e-mail gets bigger, the wider the dropdown should be. If I remove the absolute of the dropdown, the hole menu goes somewhere else.
This is my HTML:
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
>
Options
<svg
class="-mr-1 ml-2 h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</span>
</div>
<div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-2">
<p>Tom Cook</p>
<p class="font-bold truncate">tom#example.com</p>
</div>
</div>
<div class="border-t border-gray-200"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Your Profile
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
Sign out
</a>
</div>
</div>
</div>
</body>
</html>
Thanks.
I'm not familiar with tailwind, but by checking the default styles it assigns in the inspector I determined that the problem is caused by images (img tags) having a default max-width: 100% assigned to them, which makes the layout calculation confusing in this case, since it's container does not have a given width.
This can be solved by adding the max-w-none class to the image to disable this rule like this:
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full max-w-none" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
One way is to use the CSS-property width: max-content;, like below (I added an id to the relevant drop down for easier reading).
#my-drop-down .origin-top-left {
width: max-content;
}
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="relative inline-block text-left" id="my-drop-down">
<div>
<span class="rounded-md shadow-sm">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
>
Options
<svg
class="-mr-1 ml-2 h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</span>
</div>
<div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-2">
<p>Tom Cook</p>
<p class="font-bold truncate">tom#example.com</p>
</div>
</div>
<div class="border-t border-gray-200"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Your Profile
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
Sign out
</a>
</div>
</div>
</div>
</body>
</html>
I created a footer that I wanted to #include to other webpages. As such, I created #section('content'), then at the bottom #include('footer') then #endsection. Now this works only on my contact page which is showing the footer. But is not working on my home or blog pages. Below I will include the code I'm working on Laravel 7, using blade, tailwindcss, html/css. I tried multiple things like moving around #include, or #extends or #yeild but couldn't figure this out. Any help or direction would be appreciated.
When I inspect the homepage, for instance, the footer is being passed through but is mixed in with the navbar. When I inspect the contact page its placed where it should be at the bottom of the page. This has me stumped.
FOOTER
#extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
#yield('footer')
LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
</div>
</nav>
#yield('content')
</body>
</html>
CONTACT PAGE
#extends('layout')
#section('title', 'Contact')
#section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
#include('footer')
#endsection
HOME PAGE
#extends('layout')
#section('title', 'Home')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to blog about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
#include('footer')
#endsection
Lastly BLOG PAGE
#extends('layout')
#section('title', 'Blog')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
#endforelse
</ul>
</div>
</div>
</main>
#include('footer')
#endsection
Simply, improper html tags. Lesson learned to ensure open and close tags are equal. Because I was short </div> tags my code was suffering and not working as it should.
Credit goes to #kerbholz