Height issue in React Slick Slider

Question

Hi all, I am using React slick slider in my spfx react webpart. how to fix this below issue, i want to have same height for all the slides. .HomeSlides { background-color : #5c2e91 ; color : #fff ; text-align : center ; // padding : 10px ; height : auto !important ; min-height : 100px ; padding : 5px ; // max-height : 300px ; // width : 300px ; width : 95% ; float : left ; // border-spacing : 10px ; // display : table-cell ; // border : 10px solid #fff ; border-radius: 10px ; white-space : normal ; //box-sizing: border-box; // margin : 6px ; // height : inherit !important ; // display : flex !important ; // justify- content : center ; align-items: stretch; } const renderSlides = () => this .state.Slides.map(item => ( { this .openLink(item.LinkURL ? item.LinkURL : "" ); }} style={{ background: this .props.TileColor }}> { /* */ } this .props.TitleFontColor != undefined ? this .props.TitleFontColor : "#fff" }}> {item.Title} this .props.DescriptionFontColor != undefined ? this .props.DescriptionFontColor : "#fff" }}>{item.Description} { /* */ } )); return ( {...settings} > {renderSlides()} );

Vaibhav Chauhan · Answer

Hi I Don't use OffSetHeight use scrollHeight instead Below I have Implemented the same scenario with static data and you can check code here: In State I have defined 2 parameters: this .state = { height: 0, heightLoaded: false }; Also, i have applied compoenentDIdUpdate function here : componentDidUpdate() { if (! this .state.heightLoaded) { var maxHeight = 0; var sections = document.getElementsByClassName(styles.HomeSlides) for (let index = 0; index var element: any = sections[index]; console.log(element.scrollHeight); if (element.scrollHeight > maxHeight) { maxHeight = element.scrollHeight; } } this .setState({ height: maxHeight, heightLoaded: true }); } } And you need to change some div structure in your code as I have given here: public render(): React.ReactElement { return ( this .state.height }}> "#fff" }}> Slider 1 "#fff" }}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including ve this .state.height }}> "#fff" }}> Slider 2 "#fff" }}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. ); }

parthasarathy B · Answer

Your code worked like a charm Vaibhav, Thank you so much it saves my time.

Vaibhav Chauhan · Answer

There is no direct way but some tricky way to resolve this issue. You don't need to give the height in SCSS file but you can dynamic height as a state variable . In componentDidUpdate function you can check the heightOffset value of each section and apply the maximum height to the height state variable. So that sections can be render according to updated height.

parthasarathy B · Answer

If i give height in px, the more content texts are hiding.

Vaibhav Chauhan · Answer

Try to use Fix height in px instead of height:auto; If this doesn't work then Please share your code in Codepen so I can check it