I'm coded for drag and drop in angular material and dropped element should in correct hovered card , So I took index of card and drop the element using mouseover. Now the problem is for tab its not working because touchstart only take the index after touch the card.Is there any option to do that in correct way
<div class="xxl:m-2 m-1 xxl:rounded-xl rounded-lg xxl:min-h-24 min-h-14 bg-gray-400 bg-opacity-12
(mouseover)="dropped(i)" (touchstart)="dropped(i)" >
<div class="xxl:p-3 p-2">
<div class="z-20 flex items-center justify-between xxl:py-3 py-1 xxl:px-4 px-2 xxl:my-2 my-1 cursor-move xxl:rounded-lg rounded-md bg-card max-h-8 xxl:max-h-full"
*ngFor="let map of card.stages;" cdkDrag [cdkDragData]="map" (mousedown)="getData(map)" (touchstart)="getData(map)">
<div class="min-w-0" >
<div class="font-medium leading-5 truncate">{{map.stage_name}}</div>
</div>
<button mat-icon-button (click)="cutStage(map)">
<mat-icon class="xxl:icon-size-6 icon-size-5 " svgIcon="heroicons_outline:x-circle"></mat-icon>
</button>
</div>
</div>
</div>
Related
I set up my navber using tailwind css and was able to make it responsive. When viewed on a smaller screen the navigation links are displayed underneath each other in a flex block kind of way. However when viewed in a mobile viewport the navigation links are showing by default. Implimented a button that can be clicked to show and hide it but how can I use javascript to actually write the code for that to work? Here is a snippet of my code:
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block md:flex md:items-center md:w-auto">
<div class="text-sm md:flex-grow">
About
Skills
Projects
Experience
</div>
</div>
</nav>
Image of Navbar seen from the mobile view
Change block md:flex to hidden md:flex which will hide the menu on mobile screens.
You can then use Element.classList.toggle to toggle the hidden class when the button is clicked on mobile screens.
Try this
document.addEventListener('DOMContentLoaded', function(){
let menu = document.getElementById('navbar-menu');
document.getElementById('navbar-toggler').addEventListener('click', event => {
menu.classList.toggle('hidden')
})
})
<script src="https://cdn.tailwindcss.com"></script>
<!--Navbar-->
<nav id="navbar" class="fixed inset-x-0 flex flex-center justify-between flex-wrap p-5 lg:mx-10 lg:mt-5 shadow-xl rounded-lg">
<div class="flex items-center flex-shrink-0 text-green-600 mr-6">
<img class="fill-current h-8 w-8 mr-2" src="images/Logo.svg" alt="Logo" width="20">
<span class="font-bold text-2xl tracking-tight">First Last</span>
</div>
<div class="block md:hidden">
<button class="flex items-center px-3 py-2 border rounded hover:text-green-300 hover:border-green-300" id="navbar-toggler">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full hidden md:flex md:items-center md:w-auto" id="navbar-menu">
<div class="text-sm md:flex-grow">
About
Skills
Projects
Experience
</div>
</div>
</nav>
You can use Javascript to select the element by its id and add or remove classes/styles to achieve the toggle effect.
ex:
const navbar = document.querySelector("#navbar");
if (navbar.classList.contains("something"){
someelement.style.display = "none";
anotherElement.style.display = "block";
navbar.classList.add("someClass");
}
Here is an example codepen for the same.
https://codepen.io/ljc-dev/pen/MWoRayy
I want to include my - button in my gray bar. As you can see in the picture, my blue button exceeds the gray bar
export default function App() {
...
return (
<div className="text-md font-bold">
Invitee {i + 1}
<span className="float-right ">
{!!i && (
<Button className="rounded-md float-right mt-4" primary onClick={() => removeInvitee(Id)}>
-
</Button>
)}
</span>
...
)
You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
<div class=" font-bold text-gray-500 ml-4" >Invitee 2</div>
<div class="">
<Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
-
</Button>
</div>
</div>
</div>
I have a modal that's is loaded with alpines when a button is click, the thing is it also triggers a click.outside event. Is there a way of stopping this happening? I have tried finding a solution online but can't find a thing, could someone help a newbie out?
<div class="mt-12" x-data="{isTrailerModalVisible: false,}">
<button
x-on:click="isTrailerModalVisible = true";
class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blue-600 rounded transition ease-in-out duration-150 items-center"
>
<i class="far fa-play-circle"></i>
<div class="ml-2">Play Trailer</div>
</button>
<template x-if="isTrailerModalVisible">
<div
x-show="isTrailerModalVisible"
style="background-color: rgba(0, 0, 0, .5);"
class="z-50 fixed top-0 left-0 w-full h-full flex items-center shadow-lg overflow-y-auto"
>
<div class="container mx-auto lg:px-32 rounded-lg overflow-y-auto">
<div class="bg-gray-300 rounded"
>
<div class="flex justify-end pr-4 pt-2">
<button
#click="isTrailerModalVisible = false"
#keydown.escape.window="isTrailerModalVisible = false"
class="text-3xl leading-none hover:text-gray-300"
>
×
</button>
</div>
<!--Finish the clicked away for closing the modal-->
<div class="modal-body px-8 py-8" #click.outside="console.log('clicked')";>
<div class="responsive-container overflow-hidden relative" style="padding-top: 56.25%" >
<iframe width="360" height="315" class="responsive-iframe absolute top-0 left-0 w-full h-full" src="{{ $game['trailer'] }}" style="border:0;" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
I ran into this problem as well when updating from Alpine 2 to 3. Switching #click.outside to #mousedown.outside solved it for me.
I'm not sure if this is a bug in Alpine since #click.away (the old way to call #click.outside) worked in Alpine 2 but it does work with this solution.
My card element has a fixed height of h-80 (in Tailwind). usually I use the card in a grid.
Now, I have a div inside that card, which is bigger than it's parent div, however I want it to scroll vertically.
The problem becomes now, that I can not scroll completly down. The last line is cut off.
Overflow auto, but not completly scrollable:
Full height to see what content is missing:
I am using VueJS as framework, this is my Card component:
<div class="w-full overflow-hidden h-full px-3 py-2">
<div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2">
<i :class="title_icon" />
{{ title }}
</div>
<div class="h-full overflow-y-auto">
<slot>
<-- Here is another component which holds the appointments-->
</slot>
</div>
</div>
How do I fill the remaining space in a div with overflowing content in TailwindCSS?
Use the flex-grow property on the sub-div to allow it to grow.
Set flex on the parent div and flex-col to keep the styling.
Find the documentation here
<div class="flex flex-col w-full overflow-hidden h-full px-3 py-2">
<div v-if="title" class="block text-gray-700 text-lg font-semibold py-2 px-2">
<i :class="title_icon" />
{{ title }}
</div>
<div class="flex-grow h-full overflow-y-auto">
<slot>
<-- Here is another component which holds the appointments-->
</slot>
</div>
</div>
I want to display some data beloning to an image when a user hovers over it, how would I go adding and comparing id's from a livewire component ?
Livewire view
<div x-data="{tooltip : false}" class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
<div #mouseover.away="{tooltip = false}">
#forelse($animals as $animal)
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}"
src="https://source.unsplash.com/random/350x350"
alt="Animal image"
class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: {{$animal->animals->name}}</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
<span class="text-sm text-gray-600">(based on 234 ratings)</span>
</div>
</div>
</div>
#empty
<p class="text-center">No animals found</p>
#endforelse
</div>
</div>
Livewire class
class Dashboard extends Component
{
public function render()
{
$animal = UserAnimal::with('animals')->where('user_id', '=', Auth::id())->get();
return view('livewire.dashboard')->with('animals', $animal);
}
}
This snippet works when only one image is displayed, but as soon as another image is added the tooltip stops working,
E.g the user hovers over the first image and the name of that animal is displayed in the hovering tooltip.
Instead of having a global tooltip attribute on the parent div, I would use a tooltip attribute for each animal - which means you probably need to adjust your loop and html structure.
<div class="grid grid-cols-3 gap-4 ml-2 antialiased text-gray-900">
<div x-data="{tooltip : false}">
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: A dog</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">4/5 ratings </span>
<span class="text-sm text-gray-600">(based on 234 ratings)</span>
</div>
</div>
</div>
</div>
<div x-data="{tooltip : false}">
<img id="{{$animal->animals->id}}" x-on:mouseover="{tooltip = !tooltip}" x-on:mouseout="{tooltip = !tooltip}" src="https://source.unsplash.com/random/350x350" alt="Animal image" class="object-cover rounded-lg shadow-md ">
<div x-show.transition="tooltip" class="absolute -mt-16 ">
<div class="p-6 bg-white rounded-lg shadow-lg">
<h4 class="mt-1 text-xl font-semibold leading-tight uppercase truncate">This is
: A cat</h4>
<div class="mt-4">
<span class="font-semibold text-teal-600 text-md">1/5 ratings </span>
<span class="text-sm text-gray-600">(based on 2 ratings)</span>
</div>
</div>
</div>
</div>
</div>
Example in Codepen