Problema com dimensionamento do p:tabView

7 respostas
D

Galera … alguem ai sabe como faz para dimensionar o tamanho da aba do p:tabView ?
O meu esta ficando enorme … ocupa praticamente todo o tamanho do painel …
Vai ai o codigo …

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:composition template="/tamplates/tamplate.xhtml">
	<ui:define name="conteudo">
	
		<p:panel  style="margin-left:14%; width:60%">
			
				<p:tabView effect="opacity" effectDuration="normal" dynamic="true" cache="true">
			
					<!-- DADOS CLIENTE -->
					
					<p:tab title="Dados Cliente" >
						<h:form>
						<p:fieldset>
	    					
	    					<!-- PRIMEIRO PAINEL -->
	    					<h:panelGroup id="dados" layout="block">
	    			    			
	    						<h:outputText for="avaliacao-peso" value="Massa Corporal:"/>
	    						<p:inputText id="avaliacao-peso"
	    							 		required="true"
	    						 			value="#{avaliacaoBean.avaliacao.peso}"/>
	    						<p:message for="avaliacao-peso" styleClass="mensagem-erro"/>				 
	    				    			
	    						<h:outputText for="avaliacao-altura" value="Estatura:"/>
	    						<p:inputText id="avaliacao-altura"
	    									 required="true"
	    						 			 value="#{avaliacaoBean.avaliacao.altura}"/>
	    						<p:message for="avaliacao-altura" styleClass="mensagem-erro"/>				 
	    			
	    						<h:outputText for="avaliacao-alongamento" value="Flexibilidade:"/>
	    						<p:inputText id="avaliacao-alongamento"
	    							    	 required="true"
	    							 		 value="#{avaliacaoBean.avaliacao.alongamento}"/>
	    		  				<p:message for="avaliacao-alongamento" styleClass="mensagem-erro"/>				 
	    			
	    					</h:panelGroup>
	    						
	    				</p:fieldset>						
						</h:form>
					</p:tab>
			
					<!-- FOTOS -->
			
					<p:tab title="Fotos Cliente">
						<h:outputText value="Teste2"/>
					</p:tab>
			
					<!-- HISTORICO -->
					
					<p:tab title="Histórico Cliente">
					<h:outputText value="Teste3"/>
					</p:tab>
			
				</p:tabView>
				
		</p:panel>
	</ui:define>
</ui:composition>
</html>


7 Respostas

E

Tenta colocar o style:“width 300px”, então ficaria assim

<p:tabView effect="opacity" effectDuration="normal" dynamic="true" cache="true" style= "width:300px">

Só uma pergunta fora do teu assunto, vi que voce mudou a cor do menu, onde está escrito opções, voce fez isso com algum
skin do prime ou mudou pelo css, se puder dar uma olhada aqui: http://www.guj.com.br/java/238456-mudar-a-cor-do-primefaces.

vlw

D

Hum … vou tentar isso …
Então … na verdade eu apenas mudei o Skin e o restante vem com o padrão que ele oferece …
Quanto ao que vc esta querendo fazer … estava lendo um topico sobre isso semana passada … vou dar uma procurada para vc e te mando … eles haviam conseguido resolver esse problema …
vlw

D

tentei mudar a altura do p:tab desta forma:

<p:tab style="height: 10px">

Mas ainda não funcionou …

E

Tenta dar uma olhada no wizard do prime, acho que resolve teu problema mais fácil.

http://www.primefaces.org/showcase/ui/wizard.jsf

E

Tenta dar uma olhada no wizard do prime, acho que resolve teu problema mais fácil.

http://www.primefaces.org/showcase/ui/wizard.jsf

D

Estava vendo ele … vou tentar forçar a usar as abas sem precisar do botão…
Entao …sobre o seu problema … pelo q percebi vc teria q alterar o aquivo CSS do Skin que estiver usando …

E

Sei que é pelo css, mas do modo que eu fiz no css mudou apenas a cor da escrita e não a da barra.
Não estou usando nenhum skin, se vc tiver algum exemplo, ou algum lugar onde posso olhar, posta aqui
http://www.guj.com.br/java/238456-mudar-a-cor-do-primefaces.

Criado 11 de abril de 2011
Ultima resposta 12 de abr. de 2011
Respostas 7
Participantes 2