I'm using Tailwind CSS and I recently created a link using <a>, <p> and <div>. But the clickable area from <a> tag is bigger than I want, I just want in the text, but the box are in div.
I'll show my code:
<div class="mt-5">
<a :href="route('login')" class="flex justify-center">
<img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
<p class="text-purple-600">Back to login</p>
</a>
</div>
Here's how it's going:
You can shrink the anchor's flex box to contain just the content by using inline-flex and then center the content inside the surrounding div. For example:
<div class="mt-5 text-center">
<a :href="route('login')" class="inline-flex align-center">
<img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
<p class="text-purple-600">Back to login</p>
</a>
</div>
Related
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
I am trying to make the following happen:
On image hover, at the bottom it will show comments/reactions on the left and name on the right
I cannot get the 2 divs to space between at the bottom and I do not know why.
https://play.tailwindcss.com/jyBq62Ok90 is the working code
You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.
See this tailwind play
Hope this helps.
As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs
You can use group-hover utility with a div wrapper. Below code will help you much more
<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
<div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
</div>
<div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
<div class="flex justify-between">
<div class="flex text-sm font-medium text-white">
<ChatAlt2Icon class="h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
<HeartIcon class="ml-2 h-5 w-5 text-white" />
<span class="pl-1 text-white">12</span>
</div>
<div class="flex text-white">Added: Today</div>
</div>
</div>
</div>
This is an example snippet showcasing what I'm trying to achieve. (please make sure to scroll down, as the 2nd example might be hidden by tailwind warning)
In the 2nd example, as you can see, the parent box width remains the same and doesn't shrink down to fit the content.
I believe absolute positioning is probably the best to achieve the badge position that I want, however, using absolute positioning will have a similar issue of the parent not adjusting to content size.
/*
* These styles are just a workaround to fix tailwind/daisyui styles
* as for some reason daisyui doesn't override tailwind when using CDN.
*/
.img-link {
padding:0!important;
border:none!important;
}
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui#2.14.1/dist/full.css" rel="stylesheet"/>
<h1 class="mb-2">Original box</h1>
<div class="inline-block bg-rose-400">
<a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
<img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
</a>
<span class="badge">badge</span>
</div>
<h1 class="mt-6 mb-2">Badge has `tranform: translateX(-50%)`</h1>
<div class="inline-block bg-rose-400">
<a class="btn btn-ghost normal-case text-l p-0 border-0 img-link" href="/">
<img src="https://picsum.photos/200" class="h-full" alt="madlabz - Wild Rift Builds" />
</a>
<span class="badge -translate-x-1/2 ">badge</span>
</div>
<div style="height:8rem;"><!-- extra space so that content is scrollable and isn't hidden by tailwind warning --></div>
I am using tailwind css vanilla and I want to create a navbar inside the flex item that I have assigned as the visual page header content placeholder.
I encounter a problem while working on this, I have added padding all around with p-8 to the navbar element and I have notice that the navbar is overflowing over the flex item that is holding it.
I do not understand why is this behavior happening because I have added overflow-hidden to the flex item that is holding the navbar. Padding is not considered to be content?
I have tried different combination with display property and also with positioning, all without any result, therefore I need some help.
This is what I have done so far.
<link href="https://unpkg.com/tailwindcss#2.0.3/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto px-4 h-screen">
<div class="flex flex-col h-full content-start">
<div class="flex-grow w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
<nav class="p-8">
<a class="" href="#">
Home
</a>
<a class="" href="#">
Products
</a>
<a class="" href="#">
Discounts
</a>
<a class="" href="#">
Customers
</a>
</nav>
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-full">
<!-- Column Content -->
2
</div>
<div class="flex-grow my-px px-px w-full overflow-hidden bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 h-5">
<!-- Column Content -->
3
</div>
</div>
</div>
Thank you!
L.E. If you shrink the browser, the when the flex column item shrinks it overlaps the previous item. I have shrieked the browser window and I have notice that element 1 of the flex box is going under element 2 and if I go further I'm left only with element 3, the other 2 are going behind the last element 3 of the flex-box.
I have this piece of code using Bootstrap4. What I want to do is have a thumbnail image on and have text on right side of that image. I tried this in
<div class="row">
<img src="/media/pics/mypic.jpeg" id="image" class="img-fluid rounded-circle img-thumbnail float-left" style="max-width: 100%;" width="150px" height="150px">
<span class="float-left ml-2 mt-4">
<span class="h5 font-weight-bolder text-break d-inline-block">This is a long text. This doesn't wrap well.
</span>
<br>
<span class=" h6 text-muted ">
New Address, New City
</span>
</span>
</div>
When the text is small like 'This is text' the text <span>s remain on right side of the image, as desired. But a longer text cause both the <span>s to go below the image. I tried text-wrap and text-break but nothing works.
I want it like this.
Image Image Image
Image Image Image |Long text goes here.|
Image Image Image |It should wrap like this|
Image Image Image |But it doesn't|
Image Image Image
Please help
you should add width to the text and insert width and height attr from img to style.
like this
<div class="row">
<img src="img/chatbg3.jpg" id="image" class="img-fluid rounded-circle img-thumbnail float-left" style="max-width: 100% ;width:150px; height:150px">
<span style="width: 190px;" class="float-left ml-2 mt-4">
<span class="h5 font-weight-bolder text-break d-inline-block">This is a long text. This doesn't wrap well.
</span>
<br>
<span class=" h6 text-muted ">
New Address, New City
</span>
</span>
</div>
you should put the spans together in a flex container:
<div class="d-flex">
<img></img>
<span>text</span>
<span>text</span>
</div>
also, assign the spans the style word-break: break-word
I managed to fix it by using the parts from answers by #Tomer Levitski and #Moti Salamon
I cannot accept both answers. But I really appreciate their answers which helped me.
Here is the answer that worked for me.
<div class="d-flex">
<img src="pics/mypic.jpg" class="img-fluid rounded-circle img-thumbnail float-left" style="max-width: 100%; width:150px; height:150px;">
<span class="float-left ml-2 my-auto">
<span class="h5 font-weight-bolder">
Long text which will break correctly now
</span>
<br>
<span class=" h6 text-muted ">
Some more text here
</span>
</span>
</div>
I combined style="width..; height..;" and <div class="d-flex"> from the mentioned answers. also added my-auto to the <span> so that text is always vertically centered along the image.
Thank you