Question 208761 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Not able to see image after adding display flex. Image got shrunken

I am creating a page in React which left side of page contains image with Carousel and right side has its information.
Before display:flex the images are visible but after adding display:flex to place image in left side but the image got shrunken and dots of Carousel is visible like this:
image

Also Carousel circle should be below image not center of the screen

Product.jsx:

import React, { Fragment, useEffect } from 'react'
import Carousel from 'react-material-ui-carousel';
import "./ProductDetails.css";
import { useSelector,useDispatch } from 'react-redux';
import { getProductDetails } from '../../actions/productAction';
import { useParams } from 'react-router-dom';

const ProductDetails = () => {
  const {id}=useParams();
  const dispatch=useDispatch()  ; 
  const {product,loading,error}=useSelector((state)=>state.productDetails);
  useEffect(()=>{
    dispatch(getProductDetails(id));
  },[dispatch,id])
  return (
    <Fragment>
          <div className="ProductDetails">
            <div>
              <Carousel>
                {product.image &&
                  product.image.map((item, i) => (
                    <img
                      className="CarouselImage"
                      key={item.url}
                      src={item.url}
                      alt={`${i} Slide`}
                    />
                  ))}
               </Carousel>
            </div>
          </div>

    </Fragment>
  )
}
export default ProductDetails;

css is:

.ProductDetails{
    width: 100vw;
    max-width: 100%;
    padding: 6vmax;
    box-sizing: border-box;
    display: flex;
}
Tags:

2

Answers


  1. 0

    Enabling flexbox via display:flex applies some defaults for flex-shrink, flex-grow, and flex-basis.

    At the moment, the only elements in your component with explicitly defined widths are the ProductDetails container (set to 100vw) div and carousel circle buttons (set to 1em each through the react-material-ui-carousel package). The flexbox defaults dictate that the ideal size of a container is defined by its contents and although the images are certainly wider, they end up effectively inheriting the width from the carousel buttons, which results in the images getting smaller.

    To overcome this you can do a few things:

    • set all the child elements to fill up all the space of their parents
    .ProductDetails div {
   width: 100%;
}

    tell flexbox that child elements should fill up the space of their parents

    .ProductDetails div {
   flex-basis: 100%;
}

    tell flexbox that child elements should expand

    .ProductDetails div {
   flex-grow: 1;
}

    See more information here

    Login or Signup to reply.
  2. 0

    The reason why the image is shrunken and the dots of the carousel are visible is because the Carousel component is taking up the same amount of space as the ProductDetails container. This is because the Carousel component has a default widthof 100%.

    To fix this, you need to set the width of the Carousel component to be the same width as the image. You can do this by adding the following CSS to your ProductDetails.css file:

    .Carousel {
  width: 100%;
}
//This will ensure that the Carousel component takes up the same amount of space as the image, and the image will no longer be shrunken.

//The Carousel circle should be below the image, not in the center of the screen. You can do this by adding the following CSS to your ProductDetails.css file:

.CarouselCircle {
  position: absolute;
  bottom: 0;
}

    This will position the CarouselCircle component below the image.

    Here is the updated code for your ProductDetails.jsx file:

    JavaScript

    import React, { Fragment, useEffect } from 'react'
import Carousel from 'react-material-ui-carousel';
import "./ProductDetails.css";
import { useSelector,useDispatch } from 'react-redux';
import { getProductDetails } from '../../actions/productAction';
import { useParams } from 'react-router-dom';

const ProductDetails = () => {
  const {id}=useParams();
  const dispatch=useDispatch()  ; 
  const {product,loading,error}=useSelector((state)=>state.productDetails);
  useEffect(()=>{
    dispatch(getProductDetails(id));
  },[dispatch,id])
  return (
    <Fragment>
          <div className="ProductDetails">
            <div>
              <Carousel width={100}>
                {product.image &&
                  product.image.map((item, i) => (
                    <img
                      className="CarouselImage"
                      key={item.url}
                      src={item.url}
                      alt={`${i} Slide`}
                    />
                  ))}
               </Carousel>
            </div>
          </div>

    </Fragment>
  )
}
export default ProductDetails;

    And here is the updated CSS for your ProductDetails.css file:

    CSS
.ProductDetails {
  width: 100vw;
  max-width: 100%;
  padding: 6vmax;
  box-sizing: border-box;
  display: flex;
}

.Carousel {
  width: 100%;
}

.CarouselCircle {
  position: absolute;
  bottom: 0;
}

    I hope this helps!

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

Back To Top
Search