0

I'm trying to get my MapBoxGL popup content to have some styling. I'm trying to get the text styling above the image to be on the left and then the image below to be centered on the popup. See below for image. I got here because I'm converting all of my <img> components to next.js <Image /> components and it seems to be a struggle. I wish the docs had more examples.

enter image description here

Anyways, here is my current code below. I've tried a multitude of things trying to figure it out. To my knowledge, I should have an outer flex flex-col parent, and then the text should be either justify-start or items-start and then the div parent of the <Image /> should have flex justify-center or justify-items-center or something along those lines.

I also can't figure out why my popup is so much wider than my content when i only have w-full in the parent div and my <Image /> is the only thing that specifies exact width.

Any and all help is appreciated!

const popupContent = (
    <div className='test w-full h-full flex flex-col space-y-4'>
        {/*<div className='flex flex-row w-full h-full'>*/}
        <div className='flex flex-col items-start'>
            <Link
                href={`/listings/${listing.id}`}
                className="text-blue-500 hover:underline focus:outline-none">
                <h3>
                    {listing.title}
                </h3>
            </Link>
            <p>{listing.activity_type}</p>
            <p>{listing.mount_type}</p>
        </div>
        {/*<div className="relative w-full h-full">*/}
        <div className="relative w-3/4 h-full flex justify-center">
            {/*<div className="relative w-36 h-64">*/}
            <Image
                src={listing.primary_image_url}
                alt="Listing"
                // fill={true}
                object-Fit='fill'
                // width="100%"
                // className='justify-items-center'

                // className="object-cover w-full h-full"
                width='300'
                height='600'
                /*object-Fit='contain'
                fill={false}
                className='w-full'*/
            />
        </div>
    </div>
);
Mohammad Mostafa Dastjerdi
  • 674
  • 1
  • 6
  • 21
Cflux
  • 1,423
  • 3
  • 19
  • 39
  • `mx-auto`on the image should solve the issue. That sets a margin auto on the horizontal axis. Or you can try to set the outer element as `flex flex-row justify-center`. – Benji Aug 23 '23 at 08:11
  • I added `flex flex-row justify-center` to the `div` containing the image and unfortunately, that didnt work :-/ any other ideas? – Cflux Aug 23 '23 at 19:27
  • 1
    have you tried `mx-auto`? – Benji Aug 24 '23 at 12:17
  • holy $%$# it worked! `mx-auto` was the right thing to do. The `div` containing the `` component is now this: `
    ` . Go ahead and make your comment an answer and I'll mark it correct.
     – Cflux Aug 24 '23 at 18:46
  • 1
    I'm happy it worked out. I was wondering already why it wouldn't work with mx-auto and had doubt about the relative positioning :D Have fun with your project ;) – Benji Aug 25 '23 at 08:11

1 Answers1

1

By setting the image's parent <div> to mx-auto will sort out the issue. It stands for margin: 0 auto which will push the div into the middle on the vertical axis.

Benji
  • 280
  • 3
  • 15