I'm trying to make a website using svelte and tailwind. I made a little popup that pops up when you hover over the home icon. But when I later added a div it pops up under the div and does not show fully. How do I fix this?
Code:
Div that popup goes under: (is in seprate svelte component and is imported in index.svelte.)
<div class="fixed ml-15 mb-auto w-screen h-10 bg-gray-700">
<h1 class="text-center text-white font-extrabold text-lg">Welcome.</h1>
</div>
Div for the one of the popups and icons: (this one is also in another separate svelte component and is imported in index.svelte.)
<div class="sidebar-icon group">
<a href="https://github.com/ratinchat" target="_blank">
<DiGithubBadge />
</a>
<span class="sidebar-tooltip group-hover:scale-100">Github</span>
</div>
Css for popup:
.sidebar-tooltip {
#apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
Helpfull images:
No popups
With popups
The home button popup is hidden under the topbar div.
How can I make it so that the popup (also named tooltip.) pops above the div instead of below. (specifically the home but what if I wanted to make more divs under?) Any help would be greatly appreciated.
Add the TailwindCSS class z-10 or higher to .sidebar-tooltip.
Without setting a z-index your elements will be rendered on the same plane as each other, causing overlaps to occur.
Related
I have a checkbox in my Next.js project and after adding some Tailwind utility classes nothing takes effect except changes to width, height and cursor. Color, bg, border, etc. don't work.
<div className="flex py-4 m-auto w-2/3 justify-between items-start">
<div className="w-1/7">
<div className="border-b pb-4">
<h1 className="mb-2 font-medium">Filter 1</h1>
<label htmlFor="c1">
<div className="flex group active:ring-2 ring-black rounded">
<input
id="c1"
type="checkbox"
className="rounded-full h-8 w-8 cursor-pointer bg-red-100 border-red-300 text-red-600 focus:ring-red-200"
/>
<p className="pl-2 text-reg cursor-pointer group-hover:underline decoration-solid">
Subfilter 1
</p>
</div>
</label>
</div>
</div>
</div>
cursor-pointer, h-8 and w-8 are the only utility classes that are working in the checkbox. color still defaults to blue, there's no ring appearing on focus, and bg still white.
Others elements in the example code like p, div and h1 are working perfectly.
Add tailwindcss/forms to your config file:
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [require("#tailwindcss/forms")],
};
You can read more about it in the docs and the GitHub repository.
Here is a working example in Tailwind Play.
The key here is appearance CSS property - set it to none to kinda reset default browser styling
The appearance CSS property is used to control native appearance of UI controls, that are based on operating system's theme
In Tailwind it is appearance-none utility
Use appearance-none to reset any browser specific styling on an element.
<input
type="checkbox"
class="appearance-none ..."
/>
DEMO
An accessibility analysis tool gives me this error:
Fix the following:
Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with 'aria-hidden=true')
about this piece of code:
<div class="container-tab-section ....">
<button class="tab-section px-4 lg:px-sp-40 flex items-center w-1/2 bg-general-divider">
<div class="input-radio-container flex relative d-flex w-full h-full items-center">
<input type="radio" id="ab123cd" name="groupTest" aria-describedby="null"
class="input-radio input-radio-standard"
value="TestValue" aria-hidden="true" aria-label="test" tabindex="-1"><!--v-if-->
</div>
</button>
</div>
I need some help solving this problem. I already tried to remove tabindex but it creates another error, I tried to remove aria-hidden="true" but it doesn't work.
Do you have any advice?
Currently, my image is getting shown like this, but I want them to be circular and each of equal width and height.
They aren't square now and I have added the below CSS tailwind code but still am not getting them all in the circular.
<div className="cursor-pointer">
<div className="w-full overflow-hidden rounded-full mb-2 border border-black">
<img src={banner} alt={title} loading="lazy" className="w-full" />
</div>
<h3 className="text-sm md:text-lg font-medium ">{title}</h3>
</div>
I have tried different iterations with hard-coded height and width, but still am not able to figure out how to get ahead of it.
Any help is highly appreciated!!
EDIT:
On w-20 and h-20, the images get circular and on doing w-25 and h-25 they become disproportionate again. Any lead on why so?
And on adding w-20 and-20 the text isn't in the middle anymore. How can I fix that?
For tailwind, you can use the CSS for rounded-full on the image tag. You need to provide a fixed height and width to the image as well like
<img class="w-50 h-50 rounded-full" src="pic.jpg" alt="Rounded avatar">
Here is Leonardo DiCaprio below for you :)
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<img class="p-1 w-50 h-50 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtyS3wBrnrkDXvhSo8SEXpvUXqXajtTSi9zD33IpKxAJHlijHnaY1pFT30NpaxxnP58PM&usqp=CAU" alt="Bordered avatar">
Give your image's parent div element the same width and length and make it rounded full,
use this tailwind classes
w-10 h-10 rounded-full
I have been trying to shrink my flex box, but I haven't had much luck getting this to work.
Here is the code sample:
<div className="flex justify-center bg-white rounded w-23 mx-auto">
<p>Contact Number</p>
<button className="px-4 py-3"><DropIcon /></button>
</div>
This is the current state of the element
I'm trying to get buttons to stretch across the screen with tailwind, but either they align left and don't stretch out (most cases), or - as in the current state of the code, they seem to stretch off the right hand side of the screen!
I'm sure I'm missing something obvious but can't see what it is. My header and footer stretch appropriately, and originally I just duplicated them, but as buttons, not divs.
Code (stretching off screen version) currently looks like this:
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
(Note, don't think it makes a difference, but the html is actually being generated by an Elm SPA)
How do I need to nest the various container, w-full, w-screen, button etc. and what combo do I need to get what I want?
Edit: This snippet isn't the only thing that isn't stretching. For example neither does the page header. The page footer, which is attached to the bottom of the screen, stretches all the way though ...
Header:
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
Footer:
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>
You should make the <li> full width since the button is nested in it and take the width of its parent which is the li. Add a w-full class.
Maybe also try adding a block class to the button as well
Add