Resize center layoutunit in PrimeFaces dyanmically based on content - layout

Question

I have a page with a "header", "footer", "side menu" and a "content area".
I'm trying to arrange them using PrimeFaces layouts as follows:
Header -->North
Footer --> South
Side Menu --> East
Content Area --> Center
At a first glance, it's working fine.
However, my side menu contains links that will change the contents of the center area. Currently, when I click one of the links, the center area's contents will change and a vertical scroll bar will appear in the center area if the new contents have a length that is larger than the one defined for the center layoutunit.
The behavior I'm looking for is to resize the center area dynamically, pushing down the footer (south layoutunit) and showing a scroll bar for the whole page.
Is it correct that I'm using PrimeFaces layouts? Should I use something else?
Here is my "body" code:
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="200">
<ui:include src="footer.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="east" size="260">
<ui:include src="side-menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="body-content">
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
Thanks for your help

Answer 1

Is it correct that I'm using PrimeFaces layouts? Should I use something else?
Answer: It depends. I think, p:layout fullPage="true" is a component for whom wants to create a page super quick, simple and who does not have enough time with labour with view layer. If the showcase example is corresponding your requirements barely then there is no reason to drop it.
But if you want to customize or change it's behaviour or it's functionality stop and roll your own.
I have prepared a kickoff example which suits your requirements, as I said, it is not complete but it can inspire you. Let's start with components;
<h:form>
<p:fieldset legend="West" styleClass="west">
</p:fieldset>
<p:panel styleClass="north">
</p:panel>
<p:fieldset legend="East" styleClass="east">
</p:fieldset>
<p:fieldset legend="Center" styleClass="center">
</p:fieldset>
<p:panel styleClass="footer">
<p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton>
</p:panel>
</h:form>
As it can be seen, these are the basic PrimeFaces components, point here CSS's itself. (I've used p:fieldset, cause I like it's looknfeel you can use p:panel instead).
Let's start with footer. There is a thing that deserves to be mentioned, it's position, we are just placing it to bottom of the page via bottom:0px and position:absolute.
.footer{
width:100%;
height:30px;
padding:30px;
background: #000007;
clear: both;
position: absolute;
bottom: 0px;
}
Center component is HORIZONTALLY centered by margin 0 auto. There are other ways to do surely. Also if you want to center it vertically it is simple to do via margin. And margin-top:70px is just preventing overlap with north panel.
.center{
margin: 0 auto;
width:650px;
height:200px;
margin-top: 70px;
background-color: #f7f7f7;
}
East is positioned to most-left and west; vice versa.
.east{
width:200px;
height:400px;
position: absolute;
margin-top: 30px;
right: 0px;
background-color: #f7f7f7;
}
.west{
width:200px;
height:400px;
margin-top: 30px;
position: absolute;
left: 0px;
background-color: #f7f7f7;
}
North component is just like the footer but it is on the top of course via top:0px.
.north {
background-color: black;
position: absolute;
top:0px;
width: 100%;
height: 40px;
}
Now page looks like sth. similar to p:layout fullPage="true". You should customize it's looknfeel of course, maybe you can have a look to newer CSS properties like box-shadow(for north panel) or etc. Consequently about your requirement:
The behavior I'm looking for is to resize the center area dynamically,
pushing down the footer (south layoutunit) and showing a scroll bar
for the whole page.
I've prepared a content which is initially overflows from center panel and then there is a button on the footer which says sth. about magic and it calls makeMe() js function which does:
function makeMe() {
$(".center").css({
"height":"auto",
"word-wrap": "break-word"
});
$(".footer").css({
"position":"relative"
});
}
Simply expands the p:panel's height, now if it has 100 content items it will compass all of them. And via position:relative, we are saying to footer "don't stay there just stick into bottom of center component."
This is how it looks initially:
If you are loading your content via ajax there won't be a scrollbar initially. I just copied lot's of text into it that's why there is a scrollbar initially.
After clicking the button:
If there will be problem just warn me, hope that helps.