How to make TabPanel's content fill the remaining height after header

rajan_m · 29 Oct 2020, 07:54

How to set/make TabPanel's content (say Div) occupy 100% of remaining height after header. Would appreciate your help

[EDIT] Following to make things clear

Code: Select all

//index.html
<html style="'height=100%">
<body style="'height=100%">
<div id="root" style="height=100%"/>
</body>
</html>

Code: Select all

//index.tsx
ReactDOM.render(<App />, document.getElementById('root'));

Code: Select all

//App.tsx
render() {
	return ( 
	<TabView style={{height:"100%"}} >
	<TabPanel>
		<div style={{height:"100%"}}></div>	---->	not filling the TabView space
	</TabPanel>
	</TabView>
	)
}

pavel.tavoda@f4s.eu · 29 Oct 2020, 16:42

Generally for block element it's possible only with javascript. However now you can use flex layout like:

Code: Select all

<div className='my-container'>
   <div><h1>Header></h1></div>
   <div><h2>SubHeader</h2></div>
   <div className='my-rest'>rest of container</div>
</div>

Than in css/sass:

Code: Select all

my-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
my-rest {
    flex-grow: 1000;
    border: 1px solid black; // Just for visualization
}

Of course for TabPanel you have to find right container and right item and change CSS selectors accordingly.

rajan_m · 30 Oct 2020, 06:17

Thanks @pavel.tavoda@f4s.eu for the reply. So I added following CSS classes for <TabPanel>'s inner div's (got using debugger) that contains the content div.

Code: Select all

.p-tabview-panels {
  height: 90%;
}

.p-tabview-panel {
  height: 90%;
}

Am I doing it right?

pavel.tavoda@f4s.eu · 30 Oct 2020, 13:23

My example, rest of code is same:

Code: Select all

return (
	<div style={{ width: '100%', height: '100%', overflow: 'auto', position: 'fixed' }}>
		<TabView>
			<TabPanel header='HEADER I'>
				<div style={{ backgroundColor: 'cyan' }}>Rest</div>
			</TabPanel>
		</TabView>
	</div>
);

CSS for expanding TabView:

Code: Select all

.p-tabview {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.p-tabview-panels {
	flex-grow: 10;
}

And that's it. If you really want to expand internal DIV element (one with cyan color) you have to add:

Code: Select all

.p-tabview-panels div {
	height: 100%;
}

But I don't recommend this because this DIV really has height of viewport and when you add another div bellow cyan it will start after it. Try to replace TabPanel code with following snippet and you will see yourself why:

Code: Select all

...
	<TabPanel header='HEADER I'>
		<div style={{ backgroundColor: 'cyan' }}>
			<h1>Rest1</h1>
		</div>
		<div style={{ backgroundColor: 'lightgreen' }}>
			<h1>Rest2</h1>
		</div>
	</TabPanel>
...

rajan_m · 02 Nov 2020, 07:30

@pavel.tavoda@f4s.eu, Thanks a lot!

Code: Select all

.p-tabview {
	height: 100%;
	display: flex;
	flex-direction: column;
}

Solved my issue!

Megan81 · 03 Nov 2020, 15:02

Arrgh. Not working for me. Can't figure out where am I mixing up the things.

14 Nov 2020, 00:46

Hi all,

@rajan_m and @pavel.tavoda@f4s.eu Thanks a lot for your effort! Your answer will help most Users.

@Megan81, Did you try the above solution? Could you please attach a codesandbox link for us to replicate your issue?

Best Regards,

How to make TabPanel's content fill the remaining height after header

Who is online