I'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div>
<img src="./img/Logo.png">
</div>
<div class="flex flex-row">
<img src="./img/AccountLog.png">
<p class="hidden md:flex">My Account</p>
</div>
<div class="flex flex-row">
<img src="./img/love_symbol.png">
<p class="hidden md:flex">My List</p>
</div>
<div class="flex box-border flex-row">
<img src="./img/LockLogo.png">
<button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
</div>
</div>
</nav>
Here is how it looks with the logo:
And the button is displayed normally when I delete the logo:
What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?
You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:
Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.
Both solutions are shown here.
.bg-darkPink {
background: pink;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full self-center">Flex class</button>
</div>
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<div class="flex flex-column items-center">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full">Flex div</button>
</div>
</div>
</div>
</nav>
You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.
Don't let the logo disappear with display:none, do it with opacity:0
Related
I am trying to move the rectangle to right to align it with image but when i do it there is a scroll bar below and i want to remove it
<section class="relative ">
<div class="container flex flex-col-reverse lg:flex-row items-center gap-12 mt-14 lg:mt-28">
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start">
<h2 class="text-bookmark-blue text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6">
A Simple Bookmark Manager
</h2>
<p class="text-bookmark-green text-lg text-center lg:text-left mb-6">
A clean and simple interface to organize your favourite websites. Open a mew tab and see it load instantly. Try it
for free.
</p>
<div class="flex justify-center flex-wrap gap-6">
<button type="button" class="btn btn-purple hover:bg-bookmark-white hover:text-black">Get it on Chrome</button>
<button type="button" class="btn btn-white hover:bg-bookmark-purple hover:text-white">Get it on Firefox</button>
</div>
</div>
<!-- Image -->
<div class="flex justify-center flex-1 mb-10 md:mb-16 lg:mb-0 z-10">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full" src="/public/imgs/hero-bg.png" alt="" srcset="" />
</div>
</div>
<!-- Rounded Rectangle -->
<div
class="hidden md:block overflow-hidden bg-bookmark-purple rounded-l-full absolute h-80 w-2/4 top-32 right-0 lg:-bottom-28 lg:-right-36"
></div>
</section>
attached img for reference
https://prnt.sc/5Cf7y_5rUabl
overflow-hidden has to be applied to the container element (i.e. the parent), not to the element which you want to be cut off when going out of its container.
If you cannot apply overflow-hidden to the container for some reason, add another layer element between the original container and the element in question (i.e. a child of the original container, but at the same time parent of the to-be-cut element) and apply overflow-hidden to that inserted element.
Here what I've now:
and how it should looks:
<div class="overflow-auto flex flex-col h-full">
<div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
<div
v-for="item in items"
:key="item.id"
:item="item"
class="flex-1 py-4 lg:py-8"
/>
</div>
<div class="flex flex-col bg-white lg:bg-gray-light">
<div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
<template #content>
<h4
class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
v-text="$t('We Also Recommend')"
/>
</template>
</div>
<div class="flex flex-col px-7 divide-y-2 divide-metal">
<div
v-for="product in recommendProducts"
:key="product.sku"
:item="product"
class="flex-1 py-4 lg:py-8"
/>
</div>
</div>
</div>
<div class="sticky top-0 bottom-auto">
<div class="p-10">
<div class="desktop-only flex justify-between items-center pb-10 uppercase">
<p
class="subtitle1"
v-text="$t('Subtotal')"
/>
<div
:value="totals.subtotal"
class="subtitle1"
/>
</div>
<div class="flex flex-col">
<div
v-text="$t('Proceed to Checkout')"
class="btn btn--lg btn--black mb-3.5 text-[15px]"
/>
</div>
</div>
</div>
</div>
And the problem is that bottom div should cover products and section 'We also recommend' with products should have scroll. Now bottom div extends beyond the view. On bottom div I've position: sticky and on section 'We also recommend' overflow: auto. Where's the problem and how to fix it?
If I understand your problem correctly, the bottom sheet does cover the last part of the scrolling content, right? There is an easy solution:
Just add
padding-bottom: XXpx; # XX == size of sticky bottom sheet
to the scroll container
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
I am using Tailwind and I made this div:
The problem is that it looks like this when I shrink it down:
With white-space: nowrap it goes out of the div.
I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.
Code:
<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center md:space-x-16 whitespace-nowrap'>
<div className='bg-primary rounded w-14 h-14 flex items-center'>
<img src={props.logo}/>
</div>
<div className='flex flex-col flex-grow'>
<div>{props.title}</div>
<div className='flex'>
<div><img className='w-6 mt-1' src={props.flag}/></div>
<div><FaInfoCircle className='inline ml-2 text-xl'/></div>
<div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
</div>
</div>
<div className='flex flex-col'>
<div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
<div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
</div>
<div className='flex flex-col'>
<div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
<div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
</div>
<div className='flex flex-col md:pr-4'>
<div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
<div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
</div>
</div>
the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.
It will adjust the gaps according the space left for use.
seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!