Height issue in React Slick Slider

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}
{/*

*/}

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 < sections.length; 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

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan5y ago
Accepted 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 < sections.length; 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 B5y ago
Your code worked like a charm Vaibhav, Thank you so much it saves my time.
+2
Vaibhav Chauhan5y ago
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.
+1
parthasarathy B5y ago
If i give height in px, the more content texts are hiding.
+1
Vaibhav Chauhan5y ago
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
+1

Height issue in React Slick Slider

{item.Title}

Slider 1

Slider 2