I have the below template created by using TailwindCSS:
<body class="h-full">
<div class="flex h-full">
<div class="w-5/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
<div class="relative bg-gray-200 h-full">1</div>
<div class="bg-red-200">
<!-- This area is where I have problems -->
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/6">
<div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
<div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
</div>
<div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
</div>
</div>
</div>
</body>
Please see the following fiddle I have created here.
The problem I have is with these two divs:
<div class="flex h-full">
<div class="w-1/2 h-full">
<div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
</div>
<div class="w-1/2 h-full">
<div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
</div>
</div>
I want to have two links at the bottom (Link #1 and Link #2 in my example), that have a fixed position. Each link's width should occupy 50% of the parent div.
As you can see in the example posted above, the width of the two bottoms <div> exceeds that of the parent (#1).
Im not sure if this is exactly what you wanted but have a look.
I think part of the issue is flexbox wont be able to control the fixed positioned items. The width needed adjusting too. Also you should rather fix the position of the container than each individual link.
You can use something like this but fixed elements usually sit outside of these container because fixing takes it out of the page flow.
https://play.tailwindcss.com/YPc9nuhM9z
Related
The problem is that I have a title a subtitle and a footer. I would like the subtitle's div to span across the empty space between the title and the footer.
I tried setting h-full to the div but it does not seem to do anything.
export default function ASD() {
return (
<div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
<div className="bg-yellow-200">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl">
<h1>Subtitle</h1>
</div>
</div>
<footer className="mt-auto bg-green-200">Footer</footer>
</div>
);
}
Also, I would like the whole page to cover the entire screen so that the footer is at the bottom of the page.
Your header and subtitle is wrapped inside a div, you need to remove that wrapper div ,and then use flex-1 so that the subtitle div spans accross the entire height of the screen.
<div class="mx-auto flex min-h-screen w-9/12 flex-col justify-start bg-red-300 text-center">
<div class="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div class="flex-1 bg-indigo-500 text-3xl"> //👈 use flex-1 here
<h1>Subtitle</h1>
</div>
<footer class="mt-auto bg-green-200">Footer</footer>
</div>
Output:
Tailwind play link
Try this.
<div className="flex flex-col justify-start mx-auto w-9/12 h-full bg-red-300 text-center">
<div className="bg-yellow-200 flex-1 flex flex-col">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl flex-1">
<h1>Subtitle</h1>
</div>
</div>
<footer className="bg-green-200">Footer</footer>
</div>
I am struggling to make my images fill or fit their containers. I want them to take all available of the view and not beyond the view.
<div class="flex h-screen max-h-screen border-2">
<div class="w-1/2">
<div class="h-12 bg-red-100">here</div>
<div class="flex-1 border-2 border-red-200">
<img class="h-full object-contain" src="https://picsum.photos/2000/4000" alt="first image" />
</div>
</div>
<div class="w-1/2">
<div class="h-12 bg-red-100">here</div>
<div class="flex-1 h-full border-2 border-red-200">
<img class="object-fill" src="https://picsum.photos/200/300" alt="test" />
</div>
</div>
</div>
https://play.tailwindcss.com/6GMm4k4vxU
THX
You can remove the images' containers and apply w-full and h-full to both. Then, apply overflow-hidden to hide the images' overflowing parts.
Of course, the second image (https://picsum.photos/200/300) will always be blurry because we're scaling it up quite a bit.
You can also remove the max-h-screen because we already set a constant height to the screen, which is 100vh (h-screen).
<div class="flex h-screen border-2 border-red-600">
<div class="flex w-1/2 flex-col">
<div class="min-h-12 bg-red-100">here</div>
<img class="h-full w-full overflow-hidden" src="https://picsum.photos/2000/4000" alt="test" />
</div>
<div class="flex w-1/2 flex-col">
<div class="min-h-12 bg-red-100">here</div>
<img class="h-full w-full overflow-hidden" src="https://picsum.photos/200/300" alt="test" />
</div>
</div>
Tailwind-play
The above method might stretch your images. Here's another solution that should take care of it:
Remove the images thoroughly. We're going to show them as a background image.
We'll start by adding the background's images to tailwind.config:
module.exports = {
theme: {
extend: {
backgroundImage: {
'1000': "url('https://picsum.photos/1000/1000')",
'1200': "url('https://picsum.photos/1200/1200')",
}
}
}
}
You can read about this method here. You can also read about configuring the default theme here.
We'll then change the structure of the images by splitting our view into two containers (w-1/2 each). Each container will have an image as a background applied using the custom background we created (bg-1000 and bg-1200).
Each container also has a div inside it. This div is entirely optional.
<div class="flex h-screen border-2 border-red-600">
<div class="w-1/2 bg-1200">
<div class="h-12 bg-red-100">here</div>
</div>
<div class="w-1/2 bg-1000">
<div class="h-12 bg-red-100">here</div>
</div>
</div>
Tailwind-play
Here what I've now:
and how it should looks:
<div class="overflow-auto flex flex-col h-full">
<div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
<div
v-for="item in items"
:key="item.id"
:item="item"
class="flex-1 py-4 lg:py-8"
/>
</div>
<div class="flex flex-col bg-white lg:bg-gray-light">
<div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
<template #content>
<h4
class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
v-text="$t('We Also Recommend')"
/>
</template>
</div>
<div class="flex flex-col px-7 divide-y-2 divide-metal">
<div
v-for="product in recommendProducts"
:key="product.sku"
:item="product"
class="flex-1 py-4 lg:py-8"
/>
</div>
</div>
</div>
<div class="sticky top-0 bottom-auto">
<div class="p-10">
<div class="desktop-only flex justify-between items-center pb-10 uppercase">
<p
class="subtitle1"
v-text="$t('Subtotal')"
/>
<div
:value="totals.subtotal"
class="subtitle1"
/>
</div>
<div class="flex flex-col">
<div
v-text="$t('Proceed to Checkout')"
class="btn btn--lg btn--black mb-3.5 text-[15px]"
/>
</div>
</div>
</div>
</div>
And the problem is that bottom div should cover products and section 'We also recommend' with products should have scroll. Now bottom div extends beyond the view. On bottom div I've position: sticky and on section 'We also recommend' overflow: auto. Where's the problem and how to fix it?
If I understand your problem correctly, the bottom sheet does cover the last part of the scrolling content, right? There is an easy solution:
Just add
padding-bottom: XXpx; # XX == size of sticky bottom sheet
to the scroll container
I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container.
I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.
Try like this:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center justify-center border border-dashed">
<div class="flex-1"></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="flex-1">
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
</div>
With grid:
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
<div></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
I'm trying to learn tailwind-css or I would say learning css where I'm struggling with the position of elements. Working on Vue js components.
I achieved the designing few of the elements so far:
I want to add some shapes or designs inside the banner/dark-blue area and then would add some widget-box inside of it. My code look something like this:
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 left-0">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
<div class="block">
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
</div>
<feature></feature>
</div>
For reference to the components code: https://github.com/nitish1986/sample_website
My approach was to fix position of the parent element or make it relative then position the shapes with absolute positioning respective to its parent element but whenever I try to put absolute position the shapes reaches to the top of the website. It is not taking respective positioning
<div class="bg-white overlflow-hidden">
<div class="relative">
<img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
<img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
</div>
</div>
How can achieve this positioning? I want to achieve something like this:
Any better approach into it are most welcome. Thanks.
I did a lot of research work on my issue, I found out that my absolute element is taking all the space needed for me. I came to know that I have to define an empty space or define the height of the div which is exactly consumed by my absolute elements. Since in my code I have a very long absolute element, so the only thing can cover is empty div space.
<div class="bg-white block">
<nav-bar></nav-bar>
<div class="hidden md:block w-2/5 top-0 h-auto">
<img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
</div>
<div class="hidden md:block h-auto">
<img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
</div>
<div class="block bg-white h-screen">
<div class="relative">
<div class="absolute w-full top-0 pl-12 pr-12 pt-40">
<slider></slider>
<div class="flex justify-around">
<card></card>
<card></card>
<card></card>
<card></card>
</div>
</div>
</div>
</div>
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
<feature></feature>
<preview></preview>
<about-us></about-us>
</div>
So in my code I kept empty space with:
<div class="block mt-48 p-56">
<div class="p-2 w-full h-100"></div>
</div>
Hope this helps someone. Thanks