I am working with dashboard with TailwindCSS framework, that has fixed (CSS position) top panel, fixed (CSS position) sidepanel and absolute (CSS position) main content. I have a tooltip in side panel, whose hover-effect is hidden within the side panel.
<script src="https://cdn.tailwindcss.com"></script>
<div class="fixed z-10 h-10 w-full bg-red-500">Top Panel</div>
<div class="h-screen">
<div class="fixed top-10 z-10 h-full w-3/12 overflow-y-auto border-r-4 border-blue-500 bg-gray-100 pb-64">
Sidepanel
<p class="relative flex items-center text-sm font-light text-gray-500 dark:text-gray-400">
<button data-popover-placement="bottom-end" type="button"><svg class="w-5 h-5 ml-2 text-gray-400 hover:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg></button></p>
<div data-popover role="tooltip" class="absolute z-50 w-72 rounded-lg border border-gray-200 bg-white text-sm font-light text-gray-500 shadow-sm transition-opacity duration-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400">
<div class="space-y-2 p-3">
<p>This is the content of helper tooltip. Testing if the help is completely visible or not. Unfortunately not displaying the help.</p>
</div>
</div>
</div>
<div class="absolute top-10 left-1/4 z-0 min-h-full w-9/12 overflow-y-auto">Main content</div>
</div>
Please note that, I do not reproduce javascript part, as i have issue only with CSS part. In my application, when mouse enters the question mark, the helper text will appear. Currently, the helper text (below the question mark) is visible up to sidepanel width, and hidden beyond that. I want this helper text to be visible above the sidepanel and maincontent (Like the content of higher z-index value).
Thanks in advance for the help. If any further information required, please let me know.
The problem you're running into is that the side panel (fixed position) is preventing any overflow. It works if you add overflow: visible to the side panel.
Related
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 am trying to create something this input layout with Tailwind CSS, but I don't seem to find that Tailwind CSS would support this by default.
How do I do this?
Thank you in advance.
You can use inline-flex on the parent div then place border radius on first and last corners using the radius classes rounded-l-md => first button left side with medium radius, then rounded-r-md on the last button => last button right side with medium radius.
Add border for first and last buttons, center button add only top and bottom border. border will be 1 pixel wide border.
Then a variation of border-color-number to get border colors, background-colors, hover-colors, font wieght and size, etc...
You can see their documentation which is well documented with examples. Check the side bar on the left for quick browsing.
body {
padding-top: 50px;
display: flex;
justify-content: center;
}
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<div class="inline-flex">
<button class="bg-transparent text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-8 border border-gray-400 hover:border-transparent rounded-l-md">
Text Input
</button>
<button class="bg-transparent text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-8 border-t border-b border-gray-400 hover:border-transparent">
Text Input
</button>
<button class="bg-gray-300 text-md hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-6 border border-gray-400 hover:border-transparent rounded-r-md flex justify-between items-center">
<span class="flex-initial">Select Box</span>
<svg class="h-4 mx-3 flex-initial fill-current text-blue" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
<g>
<path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</g>
</svg>
</button>
</div>
I am new in tailwindcss. But I am having an issue here.
Look at the screenshots, the background color is not applying in the navbar. Also the whole html body is not getting full width in medium and small screens.
What I don't understand is that I still haven't used any of the responsive classes from tailwindcss like md, sm or lg. But there are serious problems with width and I tried using tailwind class of w-full and w-screen. None of them work.
Here's the screenshot of the problem
You can find the code here: https://codesandbox.io/s/focused-curran-jdyup
Thanks in Advance.
Edit:
ok, look at this GIF, guys.
I am trying to recreate the problem in Tailwind Play. But I couldn't. Then I noticed that the same line of code works perfectly in Tailwind Play but not with nextjs. I don't know what the problem here is but I shared both the Tailwind Play and NextJS code below.
Tailwind Play:
<div class="flex justify-between items-center p-5 bg-indigo-800 text-white">
<div class="ml-16">
<div class="flex items-center">
<div class="">
<h4 class="tracking-widest uppercase">GrayScale</h4>
</div>
<div class="lg:hidden">
<button
type="button"
class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mr-16">
<a
key={link.label}
class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
>
Home
</a>
<a
key={link.label}
class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
>
Home
</a>
<a
key={link.label}
class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
>
Home
</a>
<a
key={link.label}
class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
>
Home
</a>
<a
key={link.label}
class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
>
Home
</a>
</div>
</div>
NextJS Code:
export default function IndexPage() {
return (
<div className="flex justify-between items-center p-5 bg-indigo-800 text-white">
<div className="ml-16">
<div className="flex items-center">
<div className="">
<h4 className="tracking-widest uppercase">GrayScale</h4>
</div>
<div className="lg:hidden">
<button
type="button"
className="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</div>
<div className="mr-16">
<a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
Home
</a>
<a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
Home
</a>
<a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
Home
</a>
<a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
Home
</a>
<a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
Home
</a>
</div>
</div>
);
}
This is an issue with the chrome developer tool. At first, this worked.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
However, the problem returned.
SOLUTION:
It turned out the page had too much content, and chrome was not waiting to set the viewport size until all the content had loaded. Once I removed a large table of data. All started working as needed.
I will load the content in ajax and add pagination.
Another thing worked by class="hidden" on my long table of data and the after load. Remove the "hidden" class.
You should consider new responsive scenarios for these columns overflowing containers.
Or you should give the container overflow: hidden. The problem is with them.
I faced the same problem and found the answer here.
Basically, a 'meta' viewport element gives the browser instructions on how to control the page's dimensions and scaling. So you need to add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I had the same problem.
What did the trick for me was 'max-w-max' put that to your container (not the body tag), whick makes the max width equal to the max width of the content (so no more white on the right).
Try adding max-w-full to the container that you want full width.
You can use "w-screen" class instead container and it solved :)
<div className='w-screen'>Header</div>
I face exactly this same issue. Looks like it's not tailwindcss specific. This answer solves it for me:
Place min-w-fit to the top element or the direct child of the body.
<div class="min-w-fit lg:min-w-0 lg:max-w-5xl lg:mx-auto">
<p>something</p>
</div>
Just note that min-width always override max-width so when you need max-width e.g. in larger screen, you might need to readjust the min-width.
Update
Turns out the root of the problem is overflowing flex items, which in my case, is caused by long words e.g. URL. Note: Normally the default min-width of an HTML element is 0 but for flex items it's auto. The thing is, when the min-width is reached (which in my case is decided by the longest word), as they overflow as the screen gets smaller, the min-width:auto keep the element from shrinking and instead shrinks everything else. It shrinks the fixed font size to keep the element width and because it also shrinks the parent element, it's true that the element is actually overflowing (check with inspect element).
Solution:
Add min-width: 0 to the outmost container that's overflowing its parent. If the overflow is caused by long words, don't forget to handle the text overflow with text-overflow or overflow-wrap.
Source:
https://stackoverflow.com/a/66689926/9157799
https://stackoverflow.com/a/53784508/9157799
I've got a very simple button & modal combo working inside Tailwind & Alpine - https://jsfiddle.net/0pso5cxh/
My issue is that on the leave transition (cancel button or close icon), none of the fade animation is happening at all and it just snaps to 0 opacity. This is my first use of both Tailwind and Alpine so any pointers would be massively appreciated!
<div x-data="{ addDonationOpen: false }">
<button #click="addDonationOpen = !addDonationOpen" class="bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6"><i class="fas fa-plus-square pr-1"></i> Add Donation</button>
<div x-show="addDonationOpen" :class="{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" class="w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center" style="background: rgba(0,0,0,.7);">
<div class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Header</p>
<div #click="addDonationOpen = !addDonationOpen" class="modal-close cursor-pointer z-50">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
viewBox="0 0 18 18">
<path
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
</path>
</svg>
</div>
</div>
<!--Body-->
<div class="my-5">
<p>Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos didicisset laus angusti ferrentur arbitrium arbitramur huic desiderent.?</p>
</div>
<!--Footer-->
<div class="flex justify-end pt-2">
<button #click="addDonationOpen = !addDonationOpen" class="focus:outline-none modal-close px-4 bg-gray-400 p-3 rounded-lg text-black hover:bg-gray-300">Cancel</button>
<button class="focus:outline-none px-4 bg-teal-500 p-3 ml-3 rounded-lg text-white hover:bg-teal-400">Confirm</button>
</div>
</div>
</div>
</div>
</div>
It's not getting a chance to do the out animation because you're applying a hidden class manually using the x-class binding.
You can remove the whole x-class set of conditions you've got there on line 4 - the x-show directive will handle all that for you in a way that manages the transition.
Just make sure you add the fixed class to your class= attribute so that it still gets applied to your CSS.
For me, I just use this code below in the head of file
<style>
[x-cloak] { display: none }
</style>
and x-cloak in any elements
x-cloak
I try to make a section that contains on a side some text and on the other side an Image that should be responsive (i.e. that becomes smaller when the window's size is also becoming smaller).
Using a simple <img src="/myimage.extension" alt="describe my image" /> does work perfectly. But as soon as I use the Next.JS Image component (in order to benefit from the optimization it does), it breaks the responsiveness.
Indeed, to make a kind of hero section with a responsive image I got this code (working perfectly fine):
<>
<div className={"h-screen py-0 py-20 text-center bg-blue-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<img
src={"/image.jpg"}
alt={"Some image description"}
/>
</div>
</div>
</div>
</>
Then, replacing the img tag by an Image component breaks the responsiveness: the image never becomes smaller. It keeps its size.
<>
<div className={"h-screen py-0 py-20 text-center bg-green-100 text-dark-blue"}>
<div
className={"flex flex-col items-center justify-center h-full md:flex-row app-container md:justify-between"}>
<div>
<h1 className={"text-red-400"}>With the Image component</h1>
<p>It doesn't resize on the size of the viewport</p>
</div>
<div className={"relative"}>
<svg
className={"absolute right-0 z-50 hidden w-1/2 sm:block"}
css={css`top: 25px;left: 25px;`}
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674 674"
>
<circle id="Ellipse_8" cx="337" cy="337" r="337" fill="#e23b58"/>
</svg>
<Image
src={"/image.jpg"}
alt={"Some image description"}
width={1103}
height={628}
/>
</div>
</div>
</div>
</>
You can see what's happening on this Sandbox. I'm looking for a way that enable me to control precisely how the Image component would be positioned.
The problem is not in the Image component. It's related to the styles applied to the div container.
If you remove items-center from the classes in lines 18-22 you will see that the image is resizing:
<div className={"flex flex-col items-center justify-center ...}>
Change to:
<div className={"flex flex-col justify-center ...}>