I need a simple main div column 100% full.
Sometimes a sidebar can appear, with dynamic width.
REPL: https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku
In this example you can see I'm not able to change sidebar width (which has every time a new width value) and I'm not able to "stretch" main div to 100% width.
How to do?
<div class="min-h-screen grid grid-cols-12">
<div class="bg-green-500">
<div style={`width: ${randomWidth}px !important;`}>
Sidebar. This has dynamic width.
</div>
</div>
<div class="bg-red-500">
Main. This has full width.
</div>
</div>
I would recommend a simple use of relative and absolute. Here's the codesandbox
<div class="min-h-screen w-full relative">
{#if sidebarVisible}
<div class="bg-green-500 h-full absolute left-0">
<div style={`width: ${randomWidth}px !important;`}>
Sidebar. This has dynamic width.
</div>
</div>
{/if}
<div class="bg-red-500 h-screen">
Main. This has full width.
</div>
</div>
For 100% width, you can use w-full and for full screen height h-screen
Related
I have this layout:
This is the code for the image below:
<main>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
</main>
What I want is to have two divs, one of the left and one on the right of this layout (in the white area) that take up the remaining space without affecting the width of the main content area. How can this be done?
I've experimented with this code, but I haven't figured it out yet:
<main className="flex">
<div className="">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div className="">right white area</div>
</main>
UPDATE:
I was able to get the desired behaviour with media queries, even though I wanted to do this with native tailwind, this works as well:
--HTML--
<main className="flex">
<div id="left" className="hidden">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div id="right" className="hidden">right white area</div>
</main>
--CSS--
#media screen and (min-width: 64rem) {
#left,
#right {
width: calc((100vw - 64rem) / 2);
display: block;
}
}
I'll leave this thread open for any possible other solutions. If it can be figured out with just tailwind that's even better.
Edited again to clean up the code a bit.
I think you want flex-1 or flex-grow in the middle one, and instead of media queries for the side ones try hidden md:block and possibly something like w-1/5
I am struggling to imagine the best way to accomplish a layout I am trying to achieve which includes a static sized oval that is cropped for smaller screens and which contains text inside it that will respond based on the breakpoint.
The design is like this:
So far, I'm here:
I'm trying to achieve this by creating the Oval outside my container div then putting on negative margin on the text to give it the appearance it is inside the oval. I feel like this isn't the right approach.
Currently set up (using Tailwind):
<section id="reading">
<div class="mt-12 border border-black rounded-[50%] overflow-hidden w-[686px] h-72"></div>
<div class="flex flex-col mx-auto md:container">
<div class="self-center justify-center px-8 text-center uppercase -my-80 py-28 text-ts3 font-title-preset">Text Headline Goes Here</div>
</div>
</section>
In my head, for the oval, I would just do margin:auto; overflow:hidden, and width:100% on the div, but that isn't working.
Any pointers on how you would approach this from a better practice perspective?
Thanks!
The approach you're taking separates the oval from the content within. A better way would be to keep them together by wrapping them both in a relatively positioned div and making the oval absolutely positioned to the top and center (then using a transform to center again which is a common pattern) and adding overflow-hidden to the relatively positioned element.
Not sure what your text-ts3 class is meant to do since you did not share your config. But this example uses a few breakpoints with text size classes defined for each and some negative top margin on the text to make things look more vertically centered. Here is the example running on Tailwind Play https://play.tailwindcss.com/3zWymGzXPn
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section id="reading" class="border border-transparent pt-12">
<div class="overflow-hidden relative mx-auto md:container h-72">
<div class="border border-black rounded-[50%] w-[686px] h-full absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="h-full flex items-center justify-center max-w-[686px] mx-auto">
<div class="text-center uppercase -mt-4 sm:-mt-6 md:-mt-8 text-5xl sm:text-6xl md:text-7xl max-w-xs sm:max-w-sm">Text Headline Goes Here</div>
</div>
</div>
</section>
You can set the width of the oval to 120% (or a fixed with per breakpoint) and the shrink to 0, so it does not shrink.
<section id="reading">
<div class="flex h-screen w-full justify-center overflow-hidden bg-yellow-100">
<div class="mt-12 flex h-56 w-[120%] shrink-0 items-center justify-center rounded-[50%] border border-slate-300">
<div class="font-semibold">text goes here.</div>
</div>
</div>
</section>
See example in tailwind play.
I have a parent div holding two child div (on with a pic, the other one with text). On screens larger than 768px, the two div are displayed next to each other and the div holding the image will take the whole height defined by the content of the other div. This is working as both child div have a set with: 50%.
On screens smaller than 768px the two div should be stacked on on top of the other. I don't want to set a height for the parent div, as I'd like it to adapt to the content of the child div, and therefore I can't set a % as height for the child div holding the picture. If I set a value in px for the div holding the picture, it won't stretch to the whole length on larger screen.
<div className='bg-cyan md:flex md:pb-4'>
<div className={`relative md:w-${imgWidth}`}>
<Image src={image} alt='' layout='fill' className='object-cover'/>
</div>
<div className='md:w-1/2 flex flex-col justify-evenly font-black'>
<h1 className='font-sans-bold text-6xl mb-6'><span className='text-white'>...</h1>
<p>...</p>
</div>
</div>
Try objectFit="cover" as a prop to Image component
<div className='bg-cyan md:flex md:pb-4'>
<div className={`relative md:w-${imgWidth}`}>
<Image src={image} alt='' layout='fill' objectFit='cover'/>
</div>
<div className='md:w-1/2 flex flex-col justify-evenly font-black'>
<h1 className='font-sans-bold text-6xl mb-6'><span className='text-white'>...</h1>
<p>...</p>
</div>
</div>
Ref: https://nextjs.org/docs/api-reference/next/image#layout
I have a dashboard with two sides, a nav on the left and the main content on the right, simple. They both are housed by a main div which has the height of the current screen.
I need the main content div to scroll internally not scroll with the entire view when content overflows. All this while the nav on the right remains as is without being affected by the content overflow on the main content div
<main className=" flex flex-row h-screen">
<div className=" w-1/5 h-full flex flex-col flex-grow bg-purple-50">
////This is the side nav
</div>
<div className=" w-4/5 bg-gray-50 h-screen overscroll-auto">
/// this is the main content div that i need the content inside to scroll internally
/// what i mean by this is i dont want the whole page to move when there is a lot of content
/// just the content inside this div
</div>
</main>
How can I achieve this
Codepen
You have to give the main content container a max height of screen height. Kindly refer the pen for experimentation or look at code below.
<main className=" flex flex-row h-screen">
<div className=" w-1/5 h-full max-h-screen overflow-y-auto flex flex-col flex-grow bg-purple-50">
////This is the side nav
</div>
<div className=" w-4/5 bg-gray-50 max-h-screen overflow-y-auto">
/// this is the main content div that i need the content inside to scroll internally
/// what i mean by this is i dont want the whole page to move when there is a lot of content
/// just the content inside this div
</div>
</main>
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.