Primefaces h:panelgrid inside a p:tabView or p:outputpanel - jsf-2

Question

I am working with a h:panelgrid in a p:tabView, but the components in the panelgrid are more smaller than components(inputtext, buttons, the font size) that are outside of him.
The code is :
<ui:composition
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">
<p:panel header="Datos Generales de Proyecto" />
<h:panelGrid id="idPgProyecto" columns="4" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3">
<p:outputLabel for="idEmpresa" value="Empresa:" style="margin-right:2px;" />
<p:inputText id="idEmpresa" style="width:350px;" value="#{proyectoBean.prVista.strEmpresa}"
readonly="true"/>
<h:outputText value="   " />
<h:outputText value="   " />
<p:outputLabel for="idCodProyecto" value="Codigo: " style="margin-right:2px;"/>
<p:inputText id="idCodProyecto" value="#{proyectoBean.prVista.codigo}" style="width:350px;" />
<p:message for="idCodProyecto" display="text" />
<h:outputText value="   " />
</h:panelGrid>
<h:panelGrid id="idPgPr1" columns="5" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3,colC1-T">
<p:outputLabel for="idNombre" value="Nombre: " style="margin-right:2px;"/>
<p:inputText id="idNombre" value="#{proyectoBean.prVista.nombre}" style="width:350px;"
required="true" requiredMessage="Ingrese Nombre"/>
<p:message for="idNombre" display="icon" />
<p:outputLabel for="idFechaInicio" value="Fecha Inicio: " style="margin-right:10px;"/>
<p:calendar id="idFechaInicio" value="#{proyectoBean.prVista.fechaInicio}" showOn="button" pattern="dd-MM-yyyy"
navigator="true">
</p:calendar>
</h:panelGrid>
<p:outputPanel rendered="#{proyectoBean.prVista.id != null and proyectoBean.prVista.strEstadoProyecto == 'INC'}">
<h:panelGrid id="idPgProyecto5" columns="3" width="100%" border="0" columnClasses="colC1-T,colC2-T">
<h:outputText value="   " />
<p:commandButton value="Cerrar Proyecto" style="width: 360px; color: blue;" actionListener="#{proyectoBean.cerrarProyecto}" update="idFormProyecto">
<p:confirm header="Confirmacion de Cierre de Proyecto" message="¿Esta seguro de cerrar Proyecto?" icon="ui-icon-alert" />
</p:commandButton>
<h:outputText value="   " />
</h:panelGrid>
</p:outputPanel>
<p:tabView >
<p:tab title="Maquinas Perforacion" >
<h:outputText value="Este es un texto de prueba"/>
<h:panelGrid id="idPgMaquina" columns="5" width="100%" border="0" columnClasses="colC1-T,colC2-T,colC3,colC1-T">
<p:outputLabel for="idSlcMaquina" value="Asignar Maquina:" style="margin-right:2px;font-size: 12px;"/>
<p:selectOneMenu id="idSlcMaquina" style="width:358px;" effect="none" value="#{proyectoBean.pu.idMaquina}"
disabled="#{proyectoBean.prVista.id == null}">
<f:selectItem itemLabel=" ---- Seleccione Maquina ---- " itemValue="#{null}" noSelectionOption="true"/>
<f:selectItems value="#{proyectoBean.pu.lstMaquinas}" var="m" itemValue="#{m.id}" itemLabel="#{m.nombre}"/>
</p:selectOneMenu>
<p:commandButton id="idBtnASignar" actionListener="#{proyectoBean.asignarMaquinaProyecto}"
update="idPgMaquina,idDTMaquinasProyecto" title="Agregar Maquina a lista" icon="ui-icon-plus"/>
<h:outputText value="   " />
<h:outputText value="   " />
</h:panelGrid>
</p:tab>
<p:tab title="Empleados" >
<h:panelGrid columns="3" width="100%" columnClasses="colC1-T,colC2-T" border="0">
<p:outputLabel value="Empleado:" for="idAutoCompleteEmpleado" style="margin-right:2px;"/>
<p:autoComplete id="idAutoCompleteEmpleado" value="#{proyectoBean.pu.empleado}" completeMethod="#{proyectoBean.completarEmpleado}"
var="empleado" itemLabel="#{empleado.nombreCompleto}" itemValue="#{empleado}" converter="empleadoPRConverter"
minQueryLength="2" onclick="this.select();" forceSelection="true" size="65" disabled="#{proyectoBean.prVista.id == null}">
<p:ajax event="itemSelect" listener="#{proyectoBean.seleccionarEmpleado}" update="idDTEmpleadoProyecto"/>
</p:autoComplete>
<p:message for="idAutoCompleteEmpleado" display="text"/>
</h:panelGrid>
</p:tab>
</p:tabView>
</ui:composition>
The panelgrid inside a outputpanel or tabview has the components more smaller that the others panelgrid that are outside. I'm working with PF 4.0 and JSF 2.2
Thanks for all

Answer 1

Seems like this is because it scales based on width. In tabview width of panelgrid is much smaller, than outside.
In this case, I would suggest to create css styles for each component and apply them, rather then making them stretch automatically