tam315/react-compare-image

Override container height - how to add a custom height value for the container

Opened this issue · 2 comments

iarrieta90 commented

Hi, first of all I would like to thank you for this amazing image comparison slider, it is so powerful and easy to use!

I am having an issue when trying to set my desired height value for the container. I already tried adding the image css props, and also tried to style a div component but still doesn't work properly:

I had a look through the source code, and there seems to be a preset to make the height match an ideal width-height ratio that might be preventing further changes for the height value:

// calc and set the container's size
const idealContainerHeight = containerWidth * idealWidthHeightRatio;
setContainerHeight(idealContainerHeight);

When inspecting the code at the browser, there is a

generated by the component that overrides the styles I set for the parent div.

Is there any possible way to override this width-height ratio, or any other way to set any desired height for the container?

Thanks a lot!!

LorepRocks commented

Hi, if someone is still struggling with this issue, what I did was wrap the <ReactCompareImage> with a div and apply style to the attribute selector:

 resizableContainer: {
    '& [data-testid="container"]':{
      height: '640px !important'
    }
  }

   <div className={classes.resizableContainer}>
            <ReactCompareImage 
              leftImage={photoOne} 
              rightImage={photoTwo} 
            />
   </div>
  • 👍4
  • ❤️1