I need to relatively position some flex container, so I set it parent display relative and flex itself - absolute. But the problem is that flex width does not expands outside its relative parent. How to fix this?
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4">
<div class="absolute flex flex-wrap border border-red p-4">
<div class="border-b w-1/2">content super long</div>
<div class="border-b w-1/2">content super long</div>
<div class="w-1/2">content super long</div>
<div class="w-1/2">content super long content</div>
</div>
</div>
There is enough space for flex container to display its content with no line wraps. But it does not so.
I need following result:
You can achieve that by changing position property of parent element to static, In addition to adding another container with relative position.
Example:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="w-1/3 bg-blue-500 mx-auto my-5 relative p-4" style="position:static">
<div class="container" style="position:relative">
<div style="width:500px;" class="absolute flex flex-wrap border border-red p-4">
<div class="border-b w-1/2">content super long</div>
<div class="border-b w-1/2">content super long</div>
<div class="w-1/2">content super long</div>
<div class="w-1/2">content super long content</div>
</div>
</div>
</div>
Related
I'm trying to deal with tailwindcss. I'm creating a div; it can only take 50% of the width width, and I want it to be full width.
Thank you!
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
<div class="max-w-xl">
CONTENT
</div>
</div>
</div>
</div>
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>
<div class="flex">
<div class="flex-1 text-sm bg-red-300">
<span class="align-bottom">I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
I tried align-bottom,align-text-bottom or something with float-right and float-left (without using flex), but nothing worked so far..
Tailwind Playground.
You can try using items-end on the parent along with flex class to solve the problem.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex">
<div class="flex-1 text-sm bg-red-300 flex items-end">
<span>I want this to be on the same bottom level as Right content</span>
</div>
<div class="flex-1 text-right text-5xl bg-blue-400">
Right content
</div>
</div>
Tailwind Playground
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
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