Getting buttons to stretch full screen with Tailwind - html

I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen!
I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as buttons, not divs.
Code (stretching off screen version) currently looks like this:
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)
How do I need to nest the various container, w-full, w-screen, button etc. and what combo do I need to get what I want?
Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ...
Header:
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
Footer:
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>

You should make the <li> full width since the button is nested in it and take the width of its parent which is the li. Add a w-full class.
Maybe also try adding a block class to the button as well
Add

Related

Align 4 images in a row without overflowing CSS

I'm trying to create a row of images and I have a container that uses half the width of the page and each image takes up a quarter of that half like this:
<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
{/* Images */}
<div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
<img src={row.image} alt="Product"></img>
<div class="mt-4 w-full flex space-x-5">
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
<img src="../images/placeholder.svg" alt="Product" class="w-1/4"></img>
</div>
</div>
</div>
As you can see I have one large image above and 4 smaller images which I would like to align underneath. This currently gives this effect:
As you can see the bottom images overflow into the right-hand column. I don't want to overflow hidden or add a scrollbar but instead, I would like the images to be even sizes across this space, with a small gap inbetween. Like this example:
As you can see there's no overflow and the 4 images are even sizes and spaced underneath the image. This is the effect I would like to replicate. I'm currently using Tailwind CSS but a regular CSS explanation would work fine if anyone is unfamiliar with Tailwind.
From my understanding, there's nothing directly wrong with the code as each image does take up a 1/4, however, when I apply some margins to space them apart the images can shrink because they must maintain their 1/4 width. This then pushes the images to one side. I would like any suggestions for a clear approach to achieve the design in image two.
You can use flexbox for this.
Make sure the parent div have the properties:
display: inline-flex;
justify-content: space-evenly;
Then I believe your children/images should have this property to define its width:
flex-basis: 20%;
Take a look at this website for a quick flexbox reference.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It's generally easier to put the images in their own column element, let the column handle the gaps, and then let the image fill the container. I'd do it this way:
<div key={index} class="w-full mt-10 mb-16 md:mt-0 md:absolute md:top-[50%] md:-translate-y-[50%] md:flex md:space-x-10 space-y-5 md:space-y-0 items-start">
{/* Images */}
<div class="w-full sm:w-4/5 md:w-1/2 mx-auto md:mx-0">
<img src={row.image} alt="Product"></img>
<div class="mt-4 w-full flex space-x-5">
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
<div class="w-1/4">
<img src="../images/placeholder.svg" alt="Product"></img>
</div>
</div>
</div>
</div>
Example playground link: https://play.tailwindcss.com/JQlTDnaFdd

In TailwindCSS, why is my flex-1 element overflowing the height of the parent element, even though I use overflow-y-scroll in the overflowing child?

I am trying to create a page using HTML and TailwindCSS with some static navigation/menu and with scrollable content next to it. The scrollable content is intended to be positioned in the lower right part of the page, so the static part is left and on top of it.
My try: A parent div with h-screen with flex-col, wherein the first div is the top part with fixed height. The next div below it should now extend to the bottom of the page, this is why I used flex-1 to grow it.
The problem: Once the content in the scrollable div exceeds a certain length, the parent div (with flex-1) gets stretched and the whole page exceeds the h-screen limit, even though I have set overflow-y-scroll. If I set a certain height to the scrollable div, the scrolling works. However I don't want to set that height fixed but just fill the available space.
<div class="h-screen flex flex-col ">
<div class="grid grid-cols-3 h-16">
<div class=" col-span-1">
Title (static)
</div>
<div class="col-span-2">
Info (static)
</div>
</div>
<div class="flex-1 grid grid-cols-3">
<div class="col-span-1 flex flex-col">
<div class="flex-1">Menu (static)</div>
<div class="">
About (static)
</div>
</div>
<div class="col-span-2 overflow-y-scroll">
<p>scrollable:</p>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
</div>
</div>
</div>
Here is a playground with my attempt (It should look like this no matter how much "content"): https://play.tailwindcss.com/LhZUa0iL1K
Many thanks in advance.
By default, the overflow responsibility is given to the body. To make it work, you would need to make the wrapper div overflow initially to bring the overflow responsibility in. You just need to add overflow-y-auto to the wrapper div for the second column.
<div class="flex-1 grid grid-cols-3 overflow-y-auto">
Link: https://play.tailwindcss.com/XNKEsPano7
Here's another take:
Divide the screen into two columns with grid
Make the columns a flexbox with column direction
For the second column, make the wrapper div overflow to bring the overflow responsibility in, then make the content div overflow next to bring the overflow responsibility further in to the content div
<div class="h-screen grid grid-cols-3">
<!-- Column 1 -->
<div class="col-span-1 flex flex-col bg-gray-100">
<div class="h-16">Title (static)</div>
<div class="bg-green-100 flex-grow flex flex-col">
<div class="bg-gray-400 flex-grow">Menu (static)</div>
<div class="bg-yellow-100">About (static)</div>
</div>
</div>
<!-- Column 2, the wrapper div -->
<div class="col-span-2 flex flex-col overflow-y-auto">
<div class="bg-green-100 h-16 flex-shrink-0">Info (static)</div>
<!-- Content div -->
<div class="text-5xl flex-grow overflow-y-auto">
scrollable:
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
<div class="">content</div>
</div>
</div>
</div>
Link: https://play.tailwindcss.com/KhhTVdTKmT

How to make a vertical border in tailwind centered between two divs

Hello I'm trying to make a timeline and to do so I want to make a line intersecting each year like so example. I am using tailwind and nextjs.
This is the code that I have so far but it's still not centering the line.
<div className="relative flex-col items-center justify-center">
<span className="text-gray-400">2022</span>
<div className=" h-20 border-l border-gray-400" />
<span className="text-gray-400">2021</span>
</div>
Any help would be very much appreciated thanks.
Here is my solution using Pseudo-classes ::after
I have wrapped each span within a div tag and created an after content.
<div className="relative flex-col items-center justify-center">
<div className="after:block after:bg-black after:w-[1px] after:h-10 after:mx-auto after:my-2">
<span className="text-gray-400">2022</span>
</div>
<div className="after:block after:bg-black after:w-[1px] after:h-20 after:mx-auto after:my-2">
<span className="text-gray-400">2021</span>
</div>
<span className="text-gray-400">2020</span>
</div>
Output:

Using flexbox grow but allow the content to overflow

I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.

How do I shrink a flexbox with two elements inside of it, using Tailwind CSS?

I have been trying to shrink my flex box, but I haven't had much luck getting this to work.
Here is the code sample:
<div className="flex justify-center bg-white rounded w-23 mx-auto">
<p>Contact Number</p>
<button className="px-4 py-3"><DropIcon /></button>
</div>
This is the current state of the element