I'm trying to style a form using, but when I put in the margin for the left and right (mx-4), it is only add the margin on the left side and on the right side it's going off of the page.
export default function TextArea() {
return (
<div className="w-full mt-1 ">
<p className="text-purple-800 font-medium px-4 py-1">
What are you thinking?
</p>
<textarea
rows={4}
name="comment"
id="comment"
className="w-full sm:w-auto md:w-2/3 mx-4 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"
placeholder="Type your idea here..."
/>
</div>
)
}
I see you are using full width w-full for the div also the same thing for text area.
Here when you give w-full it will take the full with of the parent. Here Div is taking full width of its parent and text area is taking the width of div. Here you need to check the div's parent and set the correct width to it.
I believe mx-4 is being applied at the other end of the text area. You can inspect and see this in your browser
The problem is due to w-full. The class w-full on the parent div is causing the form to take up the full width of its parent container.
Change it to mx-auto
Change this
<div className="w-full mt-1 ">
to
<div className="mx-auto mt-1">
Related
I am using tailwind css, the collapse class is set 'hidden' and is toggled to 'block' on hover , but it is still not working, have seen on web and they show the same approach. I understand one way is to remove hidden class on hover but this too shall work , idk please help .
<div className='text-white text-xl font-bold relative right-8 p-2 hover:text-slate-300 cursor-pointer'>Menu
<div className='bg-white text-black z-30 w-44 right-14 hidden absolute hover:absolute'>
<div className=' block'>
<div>Add Project</div>
<div>My Projects</div>
<div>Logout</div>
</div>
</div>
</div>
I nested a bunch of mapped img elements within a div and set the div's overflow-x to scroll.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<img
id={movie?.id}
key={i}
className='w-[60] h-[60] object-contain'
src={props?.preImg + movie?.poster_path}
/>
))}
</div>
As expected, when I run this code, any img element that flows outside the barrier of the parent div's width is only visible when I scroll along the x-axis.
However, when I try to nest those img elements inside of another div, the behavior changes.
<div className='w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none'>
{props?.categoryMovies?.map((movie, i)=> (
<div className='w-60 h-60'>
<img
id={movie?.id}
key={i}
className='w-full h-full object-contain'
src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
Instead of maintaining the same results, content that flows out of the main parent div element is visible by default. So, you can say it's as if it breaks out of the barrier of the parent div element and is visible when I scroll on any part of the body of the page, not just when I scroll on the parent container div.
How can I get the second code block to behave like my initial example and have the content become visible only when I scroll on the parent div container?
One way to fix this would be to give each <div> in your flexbox the utility class flex-shrink-0, which will preserve the size of each container.
<div className="w-full px-2 flex gap-2 overflow-x-scroll scrollbar-none">
{props?.categoryMovies?.map((movie, i)=> (
<div className="w-60 h-60 flex-shrink-0">
<img id="{movie?.id}" key="{i}" className="w-full h-full object-contain" src={props?.preImg + movie?.poster_path} />
</div>
))}
</div>
You can see it working here: https://play.tailwindcss.com/KoEroV1coQ
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.
Consider the following button:
<button class="relative flex flex-row items-center justify-center w-56 h-[52px] space-x-2 bg-gray-400">
<div class='absolute top-0 left-0 flex items-center justify-center w-6 h-6 text-[11px] font-light text-white rounded-full bg-blue-600'>4</div>
<span class="text-xl font-medium text-black">Notifications</span>
</button>
Here, the absolutely positioned div is affecting the position of the span following it in the code. However, if we move the div to after the span, the absolutely position div behaves as expected and is removed from the flow of the document.
I've never experienced this before, which is why I'm writing in. I've always understood an absolutely positioned element will be positioned absolutely regardless of where it's placed in the parent container.
There's a reproducible example here
Edit: I have tried removing any flexbox styling from the div, but it makes no difference
Making the div absolute won't stop it acquiring the margin applied to it via space-x-2 when it's not the first visible child.
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.