currently im trying to create a Layout which fills the whole screen.
Thought its very easy but found out it doesn't work as expected.
Here is a Fiddle https://jsfiddle.net/s5ocg3v8/36/
<div class="h-screen grid grid-rows-[auto_1fr] p-5">
<div class="bg-slate-200 mb-1 p-2">Header</div>
<div class="grid grid-cols-[auto_1fr]">
<div class="bg-slate-200 mr-1 p-2">Navigation</div>
<div class="bg-slate-200 p-2 overflow-y-auto">
Container
<div class="border-2 border-black" style="height: 1000px;">
Content
</div>
</div>
</div>
</div>
if the content gets bigger than the container, the defined height is ignored.
i want the layout to always fill the whole screen but not more, if the content is bigger then it should show a scrollbar for the container.
i could set the header to a fixed height and then use calc(100%-headerHeight) but thats not really what i want
Just add min-h-0 to the second grid container.
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen grid grid-rows-[auto_1fr] p-5">
<div class="bg-slate-200 mb-1 p-2">Header</div>
<div class="grid grid-cols-[auto_1fr] min-h-0">
<div class="bg-slate-200 mr-1 p-2">Navigation</div>
<div class="bg-slate-200 p-2 overflow-y-auto">
Container
<div class="border-2 border-black" style="height: 1000px;">
Content
</div>
</div>
</div>
</div>
Or always prefer minmax(0,1fr) instead of 1fr
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen grid grid-rows-[auto_minmax(0,1fr)] p-5">
<div class="bg-slate-200 mb-1 p-2">Header</div>
<div class="grid grid-cols-[auto_1fr]">
<div class="bg-slate-200 mr-1 p-2">Navigation</div>
<div class="bg-slate-200 p-2 overflow-y-auto">
Container
<div class="border-2 border-black" style="height: 1000px;">
Content
</div>
</div>
</div>
</div>
Related
I have the following form with tailwind. I want the red separator to cover the full width of the outer container. So I would need it to start 24px before the left margin (that's the -ml-6) and to end 24px after (it should be 48px larger)
I know I could just let each section set its own horizontal padding (px-6), but I'd like to have a general padding for all the sections (that's the px-6) and the separators between sections to ignore that padding.
How can I achieve it?
// deal with the CDN warning
setTimeout(() => {console.clear()});
<div class="grid h-screen w-screen content-center justify-center">
<div class="grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
<div class="-ml-6 mr-0 w-full border-t-2 border-red-400"></div>
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
Note: here you have the tailwind playground example
The problem is w-full (width:100%). You just have to remove that class (set width to the default "auto").
I think, when you specify the width:100% the parent padding is taken into account when calculating the width.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});
<div class="grid h-screen w-screen content-center justify-center">
<div class="rounded-lg bg-slate-50 shadow-lg">
<div class="grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
<div class="-mx-6 border-t-2 border-red-400"></div>
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
You've asked a bit of an XY question. Rather than hammering extra markup to size, just refactor so you can put your border on an existing element. You said you'd rather have just one padding class, but that requires you to have extra markup just for styling. That's not good practice.
Chances are you can do the same for your interior elements. You shouldn't need extra divs just for a line. Overall, your markup ends up much cleaner.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});
border-t-2 border-red-400
<div class="grid h-screen w-screen content-center justify-center">
<div class="rounded-lg bg-slate-50 shadow-lg">
<div class="grid w-80 gap-4 ">
<div class="grid w-80 p-4 px-6">
<div class="grid gap-2 pb-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
<div class="grid w-80 border-t-2 border-red-400">
<div class="grid w-80 p-4 px-6">
<div class="grid gap-2 pb-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
The solution I found so far is to use -ml-6 to make the separator start 24 px before, and use calc to enlarge the width 48px, like this:
<div class="-ml-6 w-[calc(100%+48px)] border-t-2 border-red-400"></div>
see tailwind playground
I'm learning Tailwind (migrating from bootstrap) and I'm struggling to figure out how to appropriately size column heights. Here I have a 2-column layout:
<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
<div class="w-full h-full">
<div class="columns-2">
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 1</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 2</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
</div>
</div>
</div>
This renders just fine when the content is equal height. However, when I make one of the columns shorter, like so:
<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
<div class="w-full h-full">
<div class="columns-2">
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 1</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
</div>
</div>
<div class="rounded p-4 bg-white">
<h1 class="text-3xl">Box 2</h1>
<div class="columns-1 space-y-2">
<div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
</div>
</div>
</div>
</div>
</div>
I get the following result:
You can see some of the bottom padding for the first column is cut off by its parent not being tall enough, and there is some extra padding added on the top of the second column.
Here's what the box layout looks like in the inspector:
The expected behavior would be the parent 2-column element sizing its height to be tall enough so that it does not clip the taller column. The shorter column should also be top-aligned without that weird extra top margin.
Here's a live example, any help would be greatly appreciated! https://jsfiddle.net/xm9g4jfr/1/
The columns property is designed for flowing text into multiple columns so I wouldn't recommend using it in this case.
If you take out columns-2 and replace it with a grid layout, grid grid-cols-2 gap-x-6, that should give you what you are after.
https://play.tailwindcss.com/EDzOYOTSnU
You can do this for a larger screen
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto bg-gray-300 p-6">
<div class="flex flex-col">
<div class="-mx-4 flex flex-col items-stretch lg:flex-row">
<div class="flex-1 p-4">
<div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out sm:flex-row">
<div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
<!-- heading -->
<div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
<div class="p-4">
<h1 class="text-3xl">Box 1</h1>
<div class="space-y-2">
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1 p-4">
<div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out hover:cursor-pointer sm:flex-row">
<div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
<!-- heading -->
<div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
<div class="p-4">
<h1 class="text-3xl">Box 1</h1>
<div class="space-y-2">
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
<div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
i wanna ask something about display flex
<div class="container mx-auto">
<div class="d-flex">
<div class="bg-red-300 w-100 mr-3">halo</div>
<div class="bg-red-300 w-50 mr-3">halo</div>
</div>
</div>
how to display flex can manage width flex item with width 100% and 50% ?
Thankyou :)
In BS, if you want to have that kind of 2:1 ratio of width of elements, you'd have to use the grid system. Your above code will turn into:
<div class="container mx-auto">
<div class="row">
<div class="col-8 bg-red-300 mr-3">halo</div>
<div class="col-4 bg-red-300 mr-3">halo</div>
</div>
</div>
Here's how to use Flex's Bootstrap,
The 'col' has to be used to give the width of the box
<div class="container">
<div class="row">
<div class="col-6 bg-red-300">halo</div>
<div class="col-6 bg-red-300">halo</div>
</div>
</div>
I want to write a Formular with some input fields. I use Tailwind 2 and the new Grid System.
I want to have a 3 Column Formular (grid-cols-3)
On the second row I have a col-span-2 to have a row over 2 Colums because I want place a bigger textarea there.
The labels an input sizes a dfined with w-1/2 every time. When I have a colspan 2 I thought I have simple to change the width from the label to w-1/4 and the textbox to w-3/4 so the label must have the same size than all other only the input must have a bigger size.
What am I doing wrong? The label from the w-1/4 is 2 pixel bigger than the other one.
Here I have a link to the code example. https://play.tailwindcss.com/IqYsmfxpwJ
<div class="">
<h1>InfoBox</h1>
<div class="grid grid-cols-3 gap-2">
<div class="">
<lable class="inline-block w-1/2">One</lable><input class="w-1/2 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Two</lable><input class="w-1/2 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Tree</lable><input class="w-1/2 border">
</div>
<div class="col-span-2">
<lable class="inline-block w-1/4">Four</lable><input class="w-3/4 border">
</div>
<div class="">
<lable class="inline-block w-1/2">Five</lable><input class="w-1/2 border">
</div>
</div>
</div>
`
Of course the width wouldn't remain the same. When you combine two grid, the gap between gets included in the new bigger section. therefor the width of this section would be twice of the smaller ones plus the gap between them. As the result, the width of label would become bigger than the original ones.
Maybe something like this would work better for you:
<div class="">
<h1>InfoBox</h1>
<div class="grid grid-cols-3 gap-2">
<div class="flex">
<lable class="inline-block w-20 flex-none">One</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Two</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Tree</lable><input class="w-full border">
</div>
<div class="flex col-span-2">
<lable class="inline-block w-20 flex-none">Four</lable><input class="w-full border">
</div>
<div class="flex">
<lable class="inline-block w-20 flex-none">Five</lable><input class="w-full border">
</div>
</div>
</div>
I'm trying to create a typical html layout using TailwindCss - a fixed header and footer, with left-hand and right-hand sidebars.
The center content has a search function which is fixed - the content below should scroll.
I've tried utilising patterns from TailwindCss and TailwindUI, but can't get overflowing content (shown in light blue in the demo below) to scroll rather than pushing the page down.
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="h-screen flex flex-col bg-gray-300">
<!-- header -->
<div class="bg-blue-700 p-4">
Nav
</div>
<div class="flex-grow flex flex-row justify-center">
<!-- lhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Left menu
</div>
<!-- center -->
<div class="flex-1 flex flex-col bg-white">
<div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
<main class="flex-1 overflow-y-scroll p-4 bg-indigo-200">
<div class="relative">
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
</div>
</div>
</main>
<!-- rhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Right sidebar
</div>
</div>
<!-- footer -->
<div class="bg-blue-700 p-4">
Footer
</div>
</div>
</div>
What's happening is the the middle div (which contains that center column we want to be scrollable) is being clamped to the height of its contents. Unless instructed otherwise, it'd rather do that, than overflow (at least on Chrome and Firefox). So our central column never even gets the opportunity to apply its own scroll behaviour.
The minimum solution is to put overflow-hidden on the middle div, to let it know it's okay for its contents to overrun:
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="h-screen flex flex-col bg-gray-300">
<!-- header -->
<div class="bg-blue-700 p-4">
Nav
</div>
<div class="flex-grow flex flex-row overflow-hidden justify-center">
<!-- lhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Left menu
</div>
<!-- center -->
<div class="flex-1 flex flex-col bg-white">
<div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
<main class="flex-1 overflow-y-auto p-4 bg-indigo-200">
<div class="relative">
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
</div>
</div>
</main>
<!-- rhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Right sidebar
</div>
</div>
<!-- footer -->
<div class="bg-blue-700 p-4">
Footer
</div>
</div>
</div>
... as a result of which, the center column's overflow scroll behaviour becomes operational.
I've also suggested overflow-y-auto on the center column, so that the scrollbars are only when necessary.
This may not be the ideal solution, but it helps. Add this rule to your css:
main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
flex-basis: 0;
}
main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
flex-basis: 0;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="h-screen flex flex-col bg-gray-300">
<!-- header -->
<div class="bg-blue-700 p-4">
Nav
</div>
<div class="flex-grow flex flex-row justify-center">
<!-- lhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Left menu
</div>
<!-- center -->
<div class="flex-1 flex flex-col bg-white">
<div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
<main class="flex-1 overflow-y-scroll p-4 bg-indigo-200">
<div class="relative">
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
<div class="mb-64">Overflowing content</div>
</div>
</div>
</main>
<!-- rhs -->
<div class="flex-shrink-0 w-1/4 p-4">
Right sidebar
</div>
</div>
<!-- footer -->
<div class="bg-blue-700 p-4">
Footer
</div>
</div>
</div>