Question 44351 in Html Question posted in
Some basic documentation can be found here.

Child does not occupy 100% width of its parent – Html

I’m using TailwindCSS and trying to implement a shimmer effect for an item card component.
I’m trying to build exactly the same item card but with static data to be replaced while the dynamic data is being fetched. the problem is although I’m using h-full and w-full it does not occupy 100% width of its parent.

Edit Tailwind Css and React (forked)

Tags:

2

Answers


  1. 0

    Add w-full to the parent div

      <div className="md:h-5/6 md:w-9/10 w-full rounded relative "> // w-full here
        {!imageLoaded && <ItemCardShimmer />}
        <img
          className={`object-cover rounded-lg w-full h-full ${
            imageLoaded ? "block" : "hidden"
          }`}
          src="https://source.unsplash.com/250x300/?product"
          alt="Item to buy"
          onLoad={() => setImageLoaded(true)}
        />
        <div className="absolute bottom-0 left-0 w-full h-1/6 bg-black opacity-30"></div>
        <p className="absolute bottom-0 left-0 text-white text-2xl font-bold py-2 px-4">
          € 22
        </p>
      </div>

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0

    I removed the second div and it worked like so:

    <div className="md:w-2/5 md:h-9/10 rounded-lg bg-secondary flex justify-center items-center shadow-2xl">
  
    {!imageLoaded && <ItemCardShimmer />}
    <img
      className={`object-cover rounded-lg w-full h-full ${
        imageLoaded ? "block" : "hidden"
      }`}
      src="https://source.unsplash.com/250x300/?product"
      alt="Item to buy"
      onLoad={() => setImageLoaded(true)}
    />
    <div className="absolute bottom-0 left-0 w-full h-1/6 bg-black opacity-30"></div>
    <p className="absolute bottom-0 left-0 text-white text-2xl font-bold py-2 px-4">
      € 22
    </p>
  
</div>

    Also if you want the red background to be full width and height of the Image before it loads up, just add ‘height’ property to the element in ItemCardShimmer component and it will work. It worked for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search