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

UI Components for React
Post Reply
rajan_m
Posts: 5
Joined: 01 Feb 2010, 13:59

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>
	)
}
Last edited by rajan_m on 30 Oct 2020, 06:04, edited 1 time in total.

pavel.tavoda@f4s.eu
Posts: 12
Joined: 21 Oct 2020, 10:54

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
Posts: 5
Joined: 01 Feb 2010, 13:59

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
Posts: 12
Joined: 21 Oct 2020, 10:54

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
Posts: 5
Joined: 01 Feb 2010, 13:59

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
Posts: 1
Joined: 30 Oct 2020, 08:33
Contact:

03 Nov 2020, 15:02

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

mert.sincan
Posts: 4484
Joined: 29 Jun 2013, 12:38

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,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest