Alinhar grid JSF

E ai pessoal!
Alguem consegue alinhar esse grid sem fazer uma gambi?

<h:panelGrid id="gridDados" style="font-size:14px;" columns="2"
								columnClasses="coluna1, coluna2">
								<h:outputText value="Data Venda:" />
								<p:calendar id="calVenda"
									value="#{testeMB.venda.dataVenda}" size="9"
									showOn="button" navigator="true" pattern="dd/MM/yyyy" />
								
								<h:outputText value="Nº Venda:" />
								<p:inputText id="idNumeroVenda"
									value="#{testeMB.venda.numeroVenda}" />

								//O problema está aqui...preciso alinhar esses três componentes -->
                                                                <!-- tentei com <h:column> porém teve o mesmo efeito -->
								<h:outputText value="Cliente:" />
                             <h:panelGroup>
								<p:inputText id="cliente" style="text"
									value="#{testeMB.venda.cliente.nome}" readonly="true" />
								<p:commandLink process="@this" rendered="true"
									onclick="dialogPesqCliente.show()">
									<p:graphicImage value="/template/img/icones/pesquisar.png"
										style="border: none;" />
								</p:commandLink>
                             </h:panelGroup>

								<h:outputText value="CPF:" />
								<p:inputText id="cpf"
									value="#{testeMB.venda.cliente.cpf}" readonly="true" />
								
								<h:outputText value="Cidade:" />
								<p:inputText id="cidade" value="#{testeMB.cliente.id}"
									readonly="true" />
							</h:panelGrid>

Não queria ter que criar uma coluna a mais e um spacer

<h:panelGrid id="gridDados" style="font-size:14px;" columns="3"
								columnClasses="coluna1, coluna2">
								<h:outputText value="Data Venda:" />
								<p:calendar id="calVenda"
									value="#{testeMB.venda.dataVenda}" size="9"
									showOn="button" navigator="true" pattern="dd/MM/yyyy" />
								<p:spacer/> //esta é a gambi...3 colunas e um spacer para resolver..ficou ótimo..mas
								
								<h:outputText value="Nº Venda:" />
								<p:inputText id="idNumeroVenda"
									value="#{testeMB.venda.numeroVenda}" />
								<p:spacer/>
								
								<h:outputText value="Cliente:" />
								<p:inputText id="cliente" style="text"
									value="#{testeMB.venda.cliente.nome}" readonly="true" />
								<p:commandLink process="@this" rendered="true"
									onclick="dialogPesqCliente.show()">
									<p:graphicImage value="/template/img/icones/pesquisar.png"
										style="border: none;" />
								</p:commandLink>

								<h:outputText value="CPF:" />
								<p:inputText id="cpf"
									value="#{testeMB.venda.cliente.cpf}" readonly="true" />
								<p:spacer/>
								
								<h:outputText value="Cidade:" />
								<p:inputText id="cidade" value="#{testeMB.cliente.id}"
									readonly="true" />
							</h:panelGrid>

tenho esse css

.coluna1 {  
    text-align: right;  
}  
  
.coluna2 {  
    text-align: left;  
}

1 Resposta

andre.froes 17 de mai. de 2012

isso daí é meio estranho kkkkkkk, mas veja só, o panelGrid ele considera 1 componente do jsf como 1 linha da grid, então, em tese, você terá que trabalhar com apenas os panelgroups:

exemplo:

&lt;!-- panelgrid com 3 colunas --&gt;
&lt;h:panelGrid columns="3"&gt; 

       &lt;!-- Primeira coluna --&gt;
       &lt;h:outputText value="Teste"&gt;

       &lt;!-- Segunda Coluna --&gt;
       &lt;h:outputText value="Teste"&gt;

       &lt;!-- Terceira coluna  -- o layout="block" transforma o panelgroup em div, senão, ele é lido como span --&gt;
       &lt;h:panelGroup layout="block"&gt;

              &lt;!-- aqui agora vem a mágica  -- usando o seu código --&gt;
              &lt;!-- 1 div para cada conjunto de componente --&gt;
              &lt;!-- você poderia usar um outro panelGrid, que é desnecessário ou apenas fazer o css --&gt;
              &lt;!-- como você já está fazendo, basta colocar uma classe --&gt;

                    &lt;h:panelGroup layout="block"&gt;                               
                             &lt;h:outputText value="Cliente:" /&gt;  
                             &lt;h:panelGroup layout="block"&gt;  
                                &lt;p:inputText id="cliente" style="text"  
                                    value="#{testeMB.venda.cliente.nome}" readonly="true" /&gt;  
                                &lt;p:commandLink process="@this" rendered="true"  
                                    onclick="dialogPesqCliente.show()"&gt;  
                                    &lt;p:graphicImage value="/template/img/icones/pesquisar.png"  
                                        style="border: none;" /&gt;  
                                &lt;/p:commandLink&gt;  
                             &lt;/h:panelGroup&gt;  
                     &lt;/h:panelGroup&gt;
   
                     &lt;h:panelGroup layout="block"&gt;  
                                &lt;h:outputText value="CPF:" /&gt;  
                                &lt;p:inputText id="cpf" value="#{testeMB.venda.cliente.cpf}" readonly="true" /&gt;  
                      &lt;/h:panelGroup&gt;
                                    
                      &lt;h:panelGroup layout="block"&gt;  
                                &lt;h:outputText value="Cidade:" /&gt;  
                                &lt;p:inputText id="cidade" value="#{testeMB.cliente.id}" readonly="true" /&gt;
                      &lt;h:panelGroup layout="block"&gt;  

       &lt;/h:panelGroup&gt;

&lt;/h:panelGrid&gt;

Agora a sua ultima coluna tem os 3 ultimos campos agrupados 2 a 2, não sei se era isso, mas agora você já vai saber como ajustar adiante

1 Resposta

Topicos relacionados