I have some layout similar to this: https://play.tailwindcss.com/WW3PM6nFPX
When I expand one view, the entire row of views beneath it is pushed down. How can I implement a similar layout but where only the column that the expanded view is within is affected?
The actual code is a div whose height changes on button click. Like this:
<div class="rounded-lg bg-blue-700 px-4 py-2">
<div class="flex flex-row items-center">
<h1 class="font-semibold text-2xl">{project.name}</h1>
<div class="flex-grow" />
<Overflow />
</div>
<span>{project.desc}</span>
<BadgeStatus />
</div>
BadgeStatus looks like this:
<div ref={dropdownRef}
class="flex flex-row mx-2 mb-2 mt-2 px-2 py-2 rounded-md bg-green-50"
style={{height: height}}>
<span>Test</span>
<div class="flex-grow" />
<button onClick={() => setOpen(!open)}>
// Dropdown arrow //
</button>
</div>
This is what the grid looks like normally:
And when I expand one of the views:
According to the link you gave, I wrote a simple layout
I hope this is what you want
https://play.tailwindcss.com/z8hg8qChU9
Related
My desired goal is that when I keyboard to the right outside of the flexbox, I want to push the other items to the left so I can see the terms in the overflow, like a scroll. I can currently keyboard to any item, but I want to make the CSS to where it pushes the first items to overflow left or something of that nature. Here is a screenshot. If I need to translate the tailwind to normal css let me know. thanks!
<section class="ml-8 border-2">
<slot />
<div class="m-auto uppercase border-2">
Popular Searches
</div>
<div class="popularSearchTerms">
{#each popularSearches as item, index}
<button
class="popularBtn"
class:popularSearchFocused={popularSearchesHasFocus &&
index === resultsPosition}
>
<div class="flex p-2">
<span class="w-4 h-4 mt-2">
<Search />
</span>
<span class="ml-2 mr-2">{item}</span>
</div>
</button>
{/each}
</div>
</section>
<style lang="postcss">
.popularSearchTerms{
#apply flex justify-between p-2 mt-6
overflow-hidden border-2
.popularBtn {
#apply bg-navBackground rounded-md mr-4;
}
.popularSearchFocused {
#apply transition-transform duration-300
ease-in-out transform scale-110 z-
10 bg-gray-100 border-4 border-
Orange rounded-md shadow-
vodTileFocus text-navBackground
text-shadow-none;
}
</style>
I want to do this:
But my image stay in right side of div, like that:
Soo I don't know why it's happening, that's my code:
<div class="flex h-full justify-center items-center">
<div>
<h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻♀️</h2>
<h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>
<div class="lg:grid justify-center mt-4">
<BreezeButton
class="
inline-table
w-full
items-center
bg-purple-600
text-white text-xs
font-bold
hover:bg-purple-600 hover:shadow-purple
mt-3
"
:href="route('dashboard')"
>
Back to home
</BreezeButton>
</div>
</div>
<div>
<img src="../../Assets/Img/error404.svg" alt="" />
</div>
</div>
You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.
As #xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!
I am trying to get a map of a component to go to the next line (see yellow arrow). However, right now instead of going below it is squishing the Component (the Cards). I have made bg-colors to help assist. Any guidance would be great!
<div className="border-2 h-screen bg-pink-300 ">
<div className="flex justify-end px-10 ">
<button className="border-2 border-secondary p-2 rounded-lg hover:border-opacity-20">Add Item +</button>
</div>
<div className="flex overflow-x-auto bg-green-500 ">
{data.map((data) => (
<MenuCard title={data.title} ingredients={data. ingredients}
category={data.category} onSpecial={data.onSpecial} />
))}
</div>
</div>
Add the flex-wrap class into the MenuCard's parent div element. Also remove the overflow-x-auto class as this will make the container scroll vertically.
Should look like this.
<div className="flex flex-wrap bg-green-500 ">
{data.map((data) => (
<MenuCard title={data.title} ingredients={data. ingredients}
category={data.category} onSpecial={data.onSpecial} />
))}
</div>
You might also need to add flex-shrink-0 class in each MenuCard instances if it tries to shrink.
Changing image on mouse hover :
I have a png image , with text engineerign and another picture with same text but different style.
I need on Hover to change between these 2 images.
I did that few times with normal <img TAG but in next js we need to use their <Image tag insted and this is not possible :
<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src =
engin_fill)} />
Help is really appriciated
You can create 2 components inside some wrapper and just switch them on hover
<Wrapper onMouseOver={() => setHovered(true)}>
{!hovered&&<Image1/>}
{hovered&&<Image2/>}
</Wrapper>
You should use Tailwind CSS. After that, the code will look like:
<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>
e.g.-
<div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
<h1 class=tracking-wider >Title</h1>
<p class="mx-auto">Description</p>
</a>
<a href="#" class="relative">
<div class="h-48 flex flex-wrap content-center">
<img src="/image_url" class="mx-auto " alt="">
</div>
</a>
More answers:
Tailwind CSS: display text on image hover
How to install tailwind css: https://tailwindcss.com/docs/installation
I'm starting to play with Vue.js and Tailwindcss. I would like to create a component that scale depending on the container in which it's in. Is there a way to do that easily ?
For instance my current component is the following one :
NowPlaying.vue
<template>
<div class="flex flex-row flex-grow items-center p-24">
<TrackImage class="h-64 w-64" :image="image" :blurred="!isPlaying" />
<div class="ml-10 flex-1">
<div
class="uppercase tracking-tight font-extrabold text-5xl text-left text-white break-normal"
>
{{ name }}
</div>
<div
class="tracking-tight font-semibold text-3xl text-white text-left w-auto inline-block pb-4"
>
{{ artistsList }}
</div>
<ProgressBar />
</div>
</div>
</template>
Which is used in the following page:
<template>
<div class="h-screen bg-black">
<div class="container mx-auto h-full flex flex-col">
<NowPlaying :class="nowPlayingClasses" />
<TopTracks v-if="!isPlaying" />
</div>
</div>
</template>
My idea with nowPlayingClasses was to dynamically set classes of the NowPlaying component to resize it so I can later add a scaling animation without rebuilding my page.
But I can't get how I could do this.
I did try to use the scale css transformation, but it keeps the initial component size which is not what I want.