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>
Related
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">
I've looking for a way to place elements between sections, I tried using margins but the elements stay "behind" the next section in the page. What's the CSS property I need to use? I use Tailwind CSS but would like to know what property handles it so I can look about it in the documentation. Also, I'm using components (React / JSX) in my project.
I attached an image for reference.
Thanks!
[Elements inside red square][1]
[1]: https://i.stack.imgur.com/vVLbS.png
try codes below in TailwindCSS playground
hope u get what u want
<div class="bg-sky-400">
<p>test</p>
</div>
<div class="bg-indigo-400">
<div class="absolute z-10 -translate-y-1/2">
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
</div>
<p>hello</p>
</div>
I am trying to set my Login section's background opacity using bg-opacity-75, but when I add that to my className, background color will just disappear. And if I use opacity-75, all child-div will be transparent as it should, if I use opacity-100, background color will just disappear and only input field is visible, it's kinda wired. In addition, I'm using default tailwind.config file with tailwind v2.0.2.
Here's my code:
...
<div className={"h-screen w-screen py-10 lg:w-3/6"}>
<div
className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
<Logo/>
<Text/>
...
I aslo tried inline css, still not working.
using bg-opacity-75(there sholld be a white transparent area behind inputs)
I guess you are looking for something like this:
<div class="bg-green-400 h-32">
<div class="bg-gray-50 h-full w-6/12 mx-auto bg-opacity-50">
<div>Your Opacity child div here</div>
</div>
</div>
Opacity
Use opacity Keyword only, for version 2.2.7 Tails wind
example:
<div
className = "opacity-75 bg-red-300">
</div>
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16
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.