Question

我在p：tabView中使用h：panelgrid，但是panelgrid中的组件比他之外的组件（inputtext，按钮，字体大小）小。

代码是：

<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="&#160;&#160;&#160;" />
    <h:outputText value="&#160;&#160;&#160;" />

    <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="&#160;&#160;&#160;" />
</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="&#160;&#160;&#160;" />
        <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="&#160;&#160;&#160;" />
    </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="&#160;&#160;&#160;" /> 
            <h:outputText value="&#160;&#160;&#160;" /> 
        </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>

outputpanel或tabview中的panelgrid组件比外面的其他panelgrid更小。我正在使用PF 4.0和JSF 2.2

全部谢谢

Answer 1

似乎这是因为它根据宽度进行缩放。在tabview中，panelgrid的宽度比外部要小得多。在这种情况下，我建议为每个组件创建css样式并应用它们，而不是让它们自动拉伸

Primefaces h：在p：tabView或p：outputpanel中的panelgrid

1 个答案: