I'm trying to create a Hamburger menu button. But the button element has an unwanted margin on top of it.
<div class="bg-red-400 w-10 h-10 rounded-md">
<button class="bg-blue-400 w-full h-full relative focus:outline-none">
<span class="sr-only">Open main menu</span>
<span class="flex absolute top-0 w-full h-full relative">
<span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 "></span>
<span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 false"></span>
<span aria-hidden="true" class="block transform transition duration-300 ease-in-out bg-black w-8 h-0.5 "></span>
</span>
</button>
</div>
This code is not complete yet. I need to first this issue.
What is wrong here?
Update:
This code also has the same problem.
<div class="bg-blue-400 w-10 h-10">
<button class="w-full h-full">
<div class="w-full h-full flex flex-col gap-2 bg-yellow-400">
<div class="bg-white h-0.5 w-4/5"></div>
<div class="bg-white h-0.5 w-4/5"></div>
<div class="bg-white h-0.5 w-4/5"></div>
</div>
</button>
</div
There were pretty much issues with that code.
Absolute and relative can't be used parallel.
You are making spans and making them block, why not use div.
Also flex needs to be directed as columns (flex-col).
<div class="w-10 h-10 rounded-md">
<button class="bg-blue-400 w-full h-full relative focus:outline-none">
<span class="sr-only">Open main menu</span>
<div class="flex flex-col items-center justify-center gap-2 absolute top-0 w-full h-full">
<div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1"></div>
<div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1 false"></div>
<div aria-hidden="true" class="transform transition duration-300 ease-in-out bg-black w-8 h-1"></div>
</div>
</button>
</div>
Can't get the code snippet that you provided to produce anything noteworthy or descriptive, may be work uploading an image example but just from a glance. you are using both absolute and relative classes when you should only be using one here:
<span class="flex absolute top-0 w-full h-full relative">
change to
<span class="flex top-0 w-full h-full relative">
Related
my problem is that, after transitioned element fades, parent element jumps(not smoothly). I searched before asking in here but couldn't find the solution, thanks for the answers.
Here is the video about my issue:
https://streamable.com/us39pu
Main View Code: After adding new task or removing, animation works just fine with 'transition-group' e.g. no sudden jumps
<ul class="p-4 grid gap-2 grid-cols-1 relative">
<TransitionGroup
appear
move-class="transform transition duration-500 ease-in-out"
enter-active-class="transform transition duration-500 ease-in-out"
enter-from-class="opacity-0 scale-x-0 translate-x-1/2"
enter-to-class="opacity-100 scale-x-100 translate-x-0"
leave-active-class="transform transition duration-1000 ease-in-out absolute w-full "
leave-from-class="opacity-100 scale-x-100 translate-x-0"
leave-to-class="opacity-0 scale-x-0 translate-x-1/2"
>
<li v-for="task in tasks" :key="task.id">
<Task
:task="task"
#remove-task="removeTask"
#edit-task="editTask"
/>
</li>
</TransitionGroup>
</ul>
Task Component: Here editing div and removing animations works fine with 'transition' but after it fades main component jumps e.g. not smoothly
<transition
enter-active-class="transition transform duration-500 ease-in-out"
enter-from-class="scale-y-0 opacity-0 translate-y-1/2"
enter-to-class="scale-y-full opacity-100 translate-y-0"
leave-active-class="transition transform duration-500 ease-in-out"
leave-from-class="scale-y-full opacity-100 translate-y-0"
leave-to-class="scale-y-0 opacity-0 translate-y-1/2"
>
<div class="flex flex-col gap-2 mb-3" v-if="isEdit">
<input
v-model="taskLocal.title"
type="text"
class="p-1 text-center rounded-md"
/>
<select v-model="taskLocal.state" class="text-center p-1">
<option value="important">Important</option>
<option value="dontForget">Don't Forget</option>
</select>
<button
#click.prevent="editTask(taskLocal)"
class="p-2 bg-blue-400 rounded-xl"
>
edit
</button>
</div>
</transition>
<div
class="flex justify-between mb-2 shadow-2xl gap-2 bg-gradient-to-r from-white to-slate-300 rounded-xl items-center p-3 pt-6 relative"
>
<div class="absolute -ml-2 top-0 flex left-0 right-0 justify-between">
<PaperClipIcon class="w-9 -mt-3" />
<p class="underline decoration-solid break-all text-rose-400 text-xs">
Created At:
{{ new Date(task.created_at as any as Date).toLocaleDateString() }}
</p>
<div class="flex gap-2">
<PencilSquareIcon
#click.prevent="isEdit = !isEdit"
class="w-5 text-black hover:text-blue-400 cursor-pointer"
/>
<XMarkIcon
#click.prevent="removeScreen = !removeScreen"
class="w-6 hover:text-red-400 cursor-pointer"
/>
</div>
</div>
<ExclamationCircleIcon
class="w-6 h-6 text-center"
:class="[task.state === 'important' ? 'text-red-600' : 'text-green-600']"
/>
<p
class="transition-all flex-1 duration-1000 ease-in-out break-all text-center text-xl"
:class="[
task.isChecked ? ['line-through', 'text-slate-400'] : 'text-slate-700',
]"
>
{{ task.title }}
</p>
<CheckIcon
v-model="taskLocal.isChecked"
#click.prevent="taskCheck(taskLocal)"
class="w-8 h-8 text-center transition-all rounded-full hover:bg-green-300 duration-500 ease-in-out cursor-pointer"
:class="[taskLocal.isChecked ? 'text-green-600' : 'text-gray-400']"
/>
</div>
<transition
enter-active-class="transform transition duration-1000 ease-in-out"
enter-from-class="-translate-y-1/2 opacity-0 scale-y-0"
enter-to-class="translate-y-0 opacity-100 scale-y-100"
leave-active-class="transform transition duration-500 ease-in-out"
leave-from-class="translate-y-0 opacity-100 scale-y-100"
leave-to-class="-translate-y-1/2 opacity-00 scale-y-0"
>
<div
class="flex flex-col p-1 bg-white rounded-xl items-center"
v-if="removeScreen"
>
<h1 class="text-rose-400 text-center">Remove Task</h1>
<p class="text-slate-400">Task will be removed! Are you sure?</p>
<div class="flex gap-2">
<button
#click.prevent="removeScreen = !removeScreen"
class="p-1 px-4 rounded-xl bg-red-600"
>
No
</button>
<button
#click.prevent="removeTask(task.id as any as number)"
class="p-1 px-4 rounded-xl bg-green-600"
>
Yes
</button>
</div>
</div>
</transition>
I tried already existing problems but couldn't find any solution for my problem.
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>
So, I am using tailwind and I am trying to darken the background image that loads for this header. The purpose of this is I want to make sure the text is readable regardless of what someone picks for a background image.
<div :style="{ backgroundImage: `url(${profile.cover_photo_path})` }" class="bg-center bg-cover h-48 w-full grid grid-cols-9 text-white shadow-2xl rounded-xl p-2">
<div class="col-span-2 mx-auto my-auto">
<img :src="profile.profile_photo_path" class="rounded-full h-36 w-36 border-4 border-red-700" />
</div>
<div class="pl-4 md:pl-0 col-span-2 grid content-center">
<div class="text-lg font-logo uppercase">
{{profile.name}}
</div>
<div class="text-sm font-light">
{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}
</div>
<div class="text-sm font-light">
{{calculateAge}} years old
</div>
</div>
<div class="col-span-3 grid content-end">
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-end">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-center">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
```
I am open to other ideas but in my head it would be an opacity that would fix this. If you have another idea that would be more effective for this header/cover please let me know.
The best way to do this is to take an absolute image and control it as you want.
Like this: Tailwind Play Link
I had masked a div of the same dimensions but of black color behind your header and made the opacity of the header to 0.7.
I had added div by this
<div class="h-48 w-full bg-black absolute"></div>
And added class absolute z-10 opacity-70 to put the header div in front of black div.
Also instead of using :style="{ backgroundImage: url(path-name) }" you can use bg-[url(path-name)] like I had used.
You can see the complete code here
<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute z-10 grid h-48 w-full grid-cols-9 rounded-xl bg-[url(http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg)] bg-cover bg-center p-2 text-white opacity-60 shadow-2xl">
<div class="col-span-2 mx-auto my-auto">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-36 w-36 rounded-full border-4 border-pink-200" />
</div>
<div class="col-span-2 grid content-center pl-4 md:pl-0">
<div class="font-logo text-lg uppercase">{{profile.name}}</div>
<div class="text-sm font-light">{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}</div>
<div class="text-sm font-light">{{calculateAge}} years old</div>
</div>
<div class="col-span-3 grid content-end"></div>
<div class="col-span-1 grid content-end justify-end text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="col-span-1 grid content-end justify-center text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
<div class="absolute h-48 w-full bg-black"></div>
Ignore the warning and see in full view
I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this
this is my html code
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-auto my-6 mx-auto max-w-3xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Modal Title
</h3>
<button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
<span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Close
</button>
<button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
This is my typescript code to open modal
showModal:boolean = false;
toggleModal(){
this.showModal = !this.showModal;
}
Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance
Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);"
In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden...
Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:
.backdrop {
background-color: rgba(0,0,0,0.5);
}
in html:
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...
tailwind screen example with the dark background here
the component template html looks like that:
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....