Match height only working on certain pages

[ghost]

I have a React app (Rails backend) which features calendars. There are individual calendars based on topic and an aggregate calendar which pulls in all calendars. I am using Match Height to enable having a border that extends the entire length of the column based on the row. I have the following code implemented on each of the React components (componentDidMount) that I'm trying to use: $('.height-col').matchHeight({byRow: true, property: 'height'});

Each of the day cols within the row on both calendars have the class "height-col." On the aggregate calendar, Match Height is working perfectly (screenshot attached). However, on the individual calendars, it is not (screenshot also attached, you can see the border is not going all the way down.

The code for both the individual and aggregate calendars is virtually the same, so I think it's less of an issue about individual vs. aggregate and maybe more about the plugin initializing on one page but not the other. I have tried moving the jQuery initialization to the view, as well as the application.html.erb. I have also tried giving a different class name for each of the two calendar columns. However none of that makes a difference. It always works on the aggregate but not the other and there are never any console warnings or errors. I've inspected the columns and on the aggregate they are equal but not on the individual. Has anyone else experienced a similar issue, and how were you able to overcome?

Thanks.

Aggregate

Individual

[ghost]

Solved: moved initialization from parent to child component and it now works. FYI for those working with this in React