Using SwipeableViews with updateHeight()

Question

A new update to SwipeableViews allows for each Tab in the MaterialUI Tabs Component to have their own height. Let me back up a little. Before, MaterialUI Tabs component will show all tabs in the height of the longest tab. This created unnecessary scrolling on tabs that didn't need it. SwipeableViews recently fixed this by adding this to their component

<SwipeableViews
   action={actions => {this.swipeableActions = actions;}}>
   <div>{'slide n°1'}</div>
   <div>{'slide n°2'}</div>
   <div>{'slide n°3'}</div>
</SwipeableViews>

and

componentDidUpdate() {
    this.swipeableActions.updateHeight();
}

That fixed the height issue across tabs on their loaded state. But when items are hidden and shown with a click event, the height persists and shown items do not show (being cut off from view)

See image (imgur failed to load the image) see the image link instead

image

score 1 · Answer 1 · answered Jul 08 '19 at 19:15

You need to add: animateHeight to the SwipeableViews component.

You may also have to pass a function down to child components in order to update the height when a child modifies the view.

UpdateSwipeableViewHeight = () => {
 if (this.swipeableActions) this.swipeableActions.updateHeight()
};


<SwipeableViews
 id="searchTabsSwipeableView"
 axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
 index={activeTabIndex}
 onChangeIndex={index => {
    this.handleChange(null, index);
    this.UpdateSwipeableViewHeight();
  }
}
action={actions => (this.swipeableActions = actions)}
animateHeight
>
<div className={classes.swipableViewsComponent}>
 <ChildComponent updateHeight={this.UpdateSwipeableViewHeight} />
</div>

Using SwipeableViews with updateHeight()

1 Answers1