I am trying to incorporate the Tabs Component into my React Website but I am facing an issue. The content intended for display in the red/blue Container is getting shifted to the bottom for the blue container. Upon investigation, it seems that the problem stems from the presence of the invisible red box, which somehow affects the placement of my content.
This is how the JSX appears:
<div className='drinks'>
<Header />
<div className="drinks-tabs-wrapper">
<Tabs value={tab} onChange={ (_, value) => setTab(value) }>
<Tab label='Drinks' style={{ color: 'white' }} />
<Tab label='Categories' style={{ color: 'white' }} />
</Tabs>
<div style={ getTabWrapperStyle('drinks') }>
{ (!drinks || !drinkCategories) ?
<CircularProgress size={ 100 } /> :
<div hidden={ tab !== 0 }>
{ drinks.map(drink => (
<div key={ drink.id }>
<p>{ drink.id }</p>
<p>{ drink.name }</p>
<p>{ drink.price }</p>
</div>
))}
</div> }
</div>
<div style={ getTabWrapperStyle('drinkCategories') }>
{ drinkCategories &&
<div hidden={ tab !== 1 }>
{ drinkCategories.map(drinkCategory => (
<div key={ drinkCategory.id }>
<p>{ drinkCategory.name }</p>
</div>
))}
</div> }
</div>
</div>
</div>
The data for drinks and drinkCategories is retrieved from an API (hence the Loader)
The function getTabWrapperStyle responsible for applying CSS has the following structure:
const getTabWrapperStyle = (tabName) => {
if (tabName === 'drinks') {
if (tab !== 0) {
return {
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"height": "calc(100% - 50px)",
"background": "blue",
"overflowY": "scroll"
}
} else if (tab !== 1) {
return {
"height": 0
}
}
} else if (tabName === 'drinkCategories') {
if (tab !== 0) {
return {
"height": 0
}
} else if (tab !== 1) {
return {
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"height": "calc(100% - 50px)",
"background": "red",
"overflowY": "scroll"
}
}
}
}
While the red box seems to be functioning correctly, there are issues with the blue one. The shifting problem can be seen in the images below:
[1