I'm trying to create a hover message within a span. For example, when we hover over the first span (parent span) its child span is shown. That's working fine but the child span is not taking auto width. Here is the code I have tried
<span class="group/item relative ml-2 h-6 w-6 bg-yellow-300">
Hover me
<span class="absolute top-7 right-auto z-10 hidden w-auto rounded-md bg-gray-900 px-3 py-1 text-[10px] text-white group-hover/item:block"> Create payment </span>
</span>
This code gives this result
I want this result
Please note that I want to get this result with w-auto
Add whitespace-nowrap class on you children span which will prevent text from breaking after white spaces. Your span is taking width auto as expected it's just that default behavior of text is to break itself after a white space if there is no width left
<script src="https://cdn.tailwindcss.com"></script>
<span class="group/item relative ml-2 h-6 w-6 bg-yellow-300">
Hover me
<span class="absolute top-7 right-auto z-10 hidden w-auto rounded-md bg-gray-900 px-3 py-1 text-[10px] text-white group-hover/item:block whitespace-nowrap"> Create payment </span>
</span>
Related
When I use the inherit property on a <span> it doesn't take the color of the parent, but it instead takes the color of the sibling.
My JSX:
<div className={`relative flex items-center justify-center bg-blue-500`}>
<span
className={`bg-rose-600 border-4 border-inherit h-16 w-16 absolute top-1 rounded-full duration-500 ${Menus[active].dis}`}>
</span>
<div className={`bg-white max-h-[4.4rem] max-w-[360px] px-6 rounded-t-xl mt-6`}>
</div>
I want the span to take the blue color, not the white one.
I tried to put important on the bg-color of the parent, but that doesn't work.
Any ideas?
You are missing border-color in your parent:
<div class="... border-amber-400 "> 👈 add border color here
<span class="border-inherit ... "> </span>
<div class="... "></div>
</div>
Complete code:
<div class="relative flex items-center justify-center border-amber-400 bg-blue-500">
<span class="absolute top-1 h-16 w-16 rounded-full border-4 border-inherit bg-rose-600 duration-500"> </span>
<div class="mt-6 max-h-[4.4rem] max-w-[360px] rounded-t-xl bg-white px-6"></div>
</div>
I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
I make a container and I want to change its background color after the user clicks that container but the problem is, it is a div, and the focus state is not working on the div but the active state is working,
this is the code link
<div className="flex space-x-3 items-center hover:bg-messenger-gray-100 focus:bg blue-50 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
{/* the code above on the top level div is not working*/}
{/* Focus is not working on this div */}
{/* active state works */}
<span className=" font-normal whitespace-nowrap ">Muhammad Hamza</span>
</div>
how can I make the div focusable?
Is this focus property also don't work on <span></span>?
You can not apply focus for div or span. However to achieve you can try one of the hack I use. You can define the thing in button.
Below is the code:
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<div class="flex space-x-3 items-center hover:bg-messenger-gray-100 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
<span class=" font-normal whitespace-nowrap">Muhammad Hamza</span>
</div>
<button class=" w-full flex my-4 items-start hover:bg-gray-100 p-2 rounded-lg group cursor-pointer border active:bg-blue-50 focus:bg-pink-300 focus:border-pink-500"> Muhammad Hamza with focus </button>
</div>
In the Bootstrap 5 button examples, there is a space between the buttons. I'am not sure where this space is defined and don't find any margin in the devtools:
Devtools Screenshot
Where does this space come from?
Edit1
In my example (using tailwind) the space is missing despite of using inline-block. Is there a way to manipulate the spacing, or am I missing something.
Devtools Screenshot of my inline-block buttons
Reproduced example:
https://codepen.io/jjoharrer/pen/ZEyQWyo
As you can see in the bootstrap example are all input instead of one button, if you just copy another button without that will be like your example. You need to re-create margin class like bootstrap:
.button {
background-color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
<div>
<button id="" class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 mr-2">Primary</button>
<!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-secondary py-1 px-2 mr-2">Secondary</button>
<!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-info py-1 px-2 mr-2">Info</button>
<!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-success py-1 px-2 mr-2">Success</button>
<!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-warning py-1 px-2 mr-2">Warning</button>
<!--v-if--><button id="" class="button no-underline text-center rounded inline-block active button-danger py-1 px-2 mr-2">Danger</button>
<!--v-if-->
</div>
</div>
in this case i use mr-2 (margin right 2)
As you can see here if you go down (hit enter) with the code all work as expect so button will have a space else will be without space
.button {
background-color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div>
<div>
<button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
<button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
<button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button><button class="button no-underline text-center rounded inline-block active button-primary py-1 px-2 ">Primary</button>
</div>
</div>