I'm encountering an issue with my PrimeFaces layout. The south layoutUnit is not displaying on the page, and I am unsure why. Below is the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" >
<h:head>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body >
<p:layout >
<p:layoutUnit position="north" >
<h:form >
<img src="resources/images/logo.png" alt="" />
<p:outputLabel value="Search " style="font-size: large"/>
<p:inputText value="#{acount.livre.titre}" required="true" styleClass="search"/>
<p:commandButton value="Go" action="#{acount.rechercherLivre(acount.livre.titre)}" styleClass="btngo" />
<h:link outcome="main.xhtml" value="Home" style="margin-left: 400px;font-size: medium"/>
<h:link outcome="Contact.xhtml" value="Contact" style="font-size: medium"/>
<h:link outcome="Info.xhtml" value="Info" style="font-size: medium"/>
<h:link outcome="Login.xhtml" value="Login" style="font-size: medium" rendered="#{!acount.connected}" />
<h:link outcome="exe.xhtml" value="Register" style="font-size: medium" rendered="#{!acount.connected}" />
<p:menuButton value="Cart #{shopingCart.produits.size()}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Show" action="#{shopingCart.afficherPanier()}"/>
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
<p:menuButton value="Options" rendered="#{acount.connected}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Account" />
<p:menuitem value="My Orders" />
<p:menuitem value="Logout" action="#{acount.doLogout()}" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" collapsible="true" style="color: #ccc;padding-left: 50px;border-right-color: yellowgreen;border-left: none;border-bottom: none;border-top-color: yellowgreen" >
<h:link value="Art " styleClass="link">
<f:param name="productId" value="10" />
</h:link><br/>
<h:link value="Biographies" styleClass="link">
<f:param name="productId" value="10" />
</h:link><br/>
<h:link value="Business" styleClass="link">
<f:param name="productId" value="10" />
</h:link><br/>
// more links...
<img src="resources/images/payment_methods.png" style="padding-top: 50px;"/>
</p:layoutUnit>
<p:layoutUnit position="center" resizable="true" closable="true" collapsible="true" style="padding-left: 100px;padding-bottom: auto;border: none" >
<ui:insert name="content" > </ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" style="border-color: yellowgreen">
<h1>
We are unable to see this section in the page
</h1>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The navigation preview of the page appears as described above.
If anyone can provide assistance on how to resolve this issue, it would be greatly appreciated. Thank you.