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>
Related
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>
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.
Is it possible to set the height and width of an element and have it shrink when the parent height is smaller than the child height?
I have a reusable icon button component and i want it to have a specific height and width as it is a square.
But when used inside an input element i want it to shrink so it will only use the available space/height of the input element.
Here is a little demo of it.
svg {
width: 1em;
height: 1em;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-green-200 h-screen p-4 flex flex-col gap-4 items-start">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
<input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
<div class="flex items-center justify-center children:any-h-full h-full text-2xl">
<div class="flex items-center gap-1 text-gray-400">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
><span
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
></span>
</div>
</div>
</div>
</div>
I managed to get it to work for the height, but now the width is the problem when i use it in the input element. I tried setting it with max-width, but didn't succeed and i'm a little stuck right now.
Thanks in advance!!
You can use the new css property "aspect-ratio", and set it to "1/1" , it will maintain proportional dimensions while the elements width or height changes depending on its container.
check css-tricks for more details.
To expand on existing answers, you're setting a fixed width on it, but you need to think about the dimensions of this element in terms of aspect ratio, which in your case is 1:1. One way to define it is using Tailwind's utilities for the aspect-ratio property. You need to make sure to propagate h-full all the way to your element so that finally setting h-full on that element has any effect.
The actual changes you need to make is:
add h-full to the Flex container that's wrapping the 2nd close button, this will give effect to the h-full on that button
remove w-16 from both close buttons, because you want the width to depend on the height
instead add aspect-square, which will make width the same as height
If aspect-ratio's browser support isn't acceptable to you, the alternative is to use the padding hack provided by the #tailwindcss/aspect-ratio plugin.
Instead of using fixed values, you could use "100%" for height and width and use fixed pixel values for max-height and max-width. That way the child won't get larger than the parent, but also not larger than the max-values define.
Thanks to the input of Ala Mouhamed and silvenon i managed to get it to work by using aspect-ratio and a fixed height. When using it inside the input field i just pass h-auto to the icon button and override the fixed height. This way it will adjust to the height of the input -> Tailwind Play Demo
svg {
width: 1em;
height: 1em;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-green-200 h-screen p-4 space-y-4">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 aspect-square bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
<input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
<div class="flex items-center justify-center children:any-h-full h-full text-2xl">
<div class="flex items-center gap-1 text-gray-400">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 h-auto aspect-square bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
><span
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
></span>
</div>
</div>
</div>
</div>
</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'm having trouble positioning elements using tailwind. I currently have a submenu positioned absolute. Beneath this element, I have a search bar, who's parent is positioned relative, and the element itself is positioned absolute. This is so that the search icon can ble displayed in the middle of the input.
When the submenu is open, the search bar overlaps the submenu.
Image
Already tried
I've tried positioning the elements in another way, switching between the different positions. I've also tried setting z-indexes to the elements in question.
Html
<div>
<nav>
<!-- other navbar code -->
<div class="block">
<div class="hidden sm:block">
<a href="#" class="flex items-center font-medium text-base text-gray-500 hover:text-gray-900 sm:mt-0 sm:text-xs sm:block">
<svg class="h-5 mr-2 fill-current h-5 mr-2 fill-current sm:block sm:m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
Name
</a>
</div>
<div class="sm:absolute sm:right-0 sm:mr-5 sm:bg-white sm:rounded sm:shadow"> <!-- needs to be absolute to not mess ut rest of navbar -->
<div class="border-t border-gray-300 sm:border-none">
<div class="px-5 py-5">
<span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Daniel Kjellid</span>
Action
</div>
</div>
<div class="border-t border-gray-300">
<div class="px-5 py-5">
<span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Administrator</span>
Another action
</div>
</div>
<button class="w-full text-center py-4 text-gray-900 font-medium bg-gray-200 hover:bg-gray-300">
Logg ut
</button>
</div>
</div>
</nav>
</div>
<div class="bg-white px-5 py-3 flex justify-between items-center border-b border-gray-300">
<div class="relative mr-3 w-full"> <!-- needs to be relative to position svg inside input -->
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-6 w-6 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
</div>
<input type="text" class="form-input pl-10 py-2 rounded-lg bg-gray-300 text-gray-600 block w-full" placeholder="Søk blant hundrevis av varer">
</div>
<button class="open-filter-btn bg-gray-300 py-2 px-4 rounded-lg text-gray-600 flex items-center font-medium" type="button">
<svg class="filter-closed-icn h-5 w-5 fill-current mr-2" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- path -->
</svg>
<svg class="filter-open-icn h-6 fill-current text-gray-600 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
Filter
</button>
</div>