Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't center absolute position (Tailwind.css)

Background & Problem:

I'm using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using absolute

Codepen here: https://codepen.io/jdonline/pen/YzXpbyJ

When I position the dropdown using relative, it positions perfectly as I want it to (but stretches the rest of the page which I don't want). However, when I change this to absolute, although it no longer stretches the page, it extends the dropdown wider than expected.

Example:

You can see this by clicking the dropdown arrow on the right side of the search bar. You can also see the difference when changing absolute to relative on Line 26

Question:

How can I, using Tailwind.css, position the dropdown so it has absolute position, but doesn't extend wider than the search bar?

like image 416
John Cliven Avatar asked Feb 23 '20 13:02

John Cliven


2 Answers

with tailwind only, you can use the following classes

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

so, it would be like

<div class="relative">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>
like image 180
Adharsh M Avatar answered Nov 09 '22 07:11

Adharsh M


The answer is very simple, position:absolute should have a parent div with position:relative, in your case relative is for body I think, You need to give relative to the parent div which is n line number 25,

You can also refer Position CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">
like image 14
Akhil Aravind Avatar answered Nov 09 '22 06:11

Akhil Aravind