Alinhar componentes primeFaces

6 respostas
prog.tiago

Boa madruga amigos,

Gente, estou tentando alinha alguns componentes com JSF e não estou conseguindo.

Vejam:

<h:outputText value="Pesquisar matrícula: "style="horizontal-align:center" />
<p:inputText size="100" id="pesquisa" value="#{matriculadoBean.matriculado.matricula}" style="horizontal-align:center"/>
<p:commandButton value="..." style="horizontal-align:center" actionListener="#{matriculadoBean.getListaFiltrada}"update="tableMatricula"/>

Como eu deveria fazer?

6 Respostas

aix

oi prog.tiago, ponha dentro de um <h:panelGrid> tem também o atributo columns que é por default 1

ex:

<h:panelGrid>
     <h:outputText value="Pesquisar matrícula:  />
     <p:inputText size="100" id="pesquisa" value="#{matriculadoBean.matriculado.matricula}" />
          <h:panelGrid>
              <p:commandButton value="..." style="horizontal-align:center" actionListener="#{matriculadoBean.getListaFiltrada}"update="tableMatricula"/>			
          </h:panelGrid>
</h:panelGrid>
prog.tiago

Obrigado aix,

Mas na verdade o meu problema é que a tag style=“horizontal-align:center” não está funcionando. Acho que na verdade não deveria utilizá-la. kk

Eu gostaria de alinhar todos os meus componentes no centro. O que eu poderia fazer?

Abraços

aix

prog.tiago:
Obrigado aix,
Mas na verdade o meu problema é que a tag style=“horizontal-align:center” não está funcionando. Acho que na verdade não deveria utilizá-la. kk
Eu gostaria de alinhar todos os meus componentes no centro. O que eu poderia fazer?
Abraços

usa um _template e aplica um css a ele - ex: resumido do meu blog: mas você pode sim aplicar estilos diretamente nos seus componentes(se não funcionou deve ser por outro motivo qualquer), antes de escrever os códigos eu costumo usar o firebug, altero o css no firebug diretamente no browser e vejo o comportamento na tela, após decidido como quero o layout eu levo o código para o projeto.

<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:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <title>
            <ui:insert name="titulo_pagina" >Dilnei Cunha - Web-log.</ui:insert>
        </title>
        <link type="text/css" rel="stylesheet" href="resources/css/style.css" />
        <link type="text/css" rel="stylesheet" href="resources/css/config_component.css" />
    </h:head>

    <h:body>
        <div id="blocoCabecalho">
            <div class="container">
            </div>
            
        <div id="textoLogo">
                <div class="container">
                    <p>Programador Java e Piloto Ninja.</p>
                </div>
            </div>
        </div>
        
        <div id="blocoConteudo">
            <div class="container">
                <ui:insert name="corpo"/>
            </div>
        </div>

        <div id="blocoRodape">
            <div class="container">
                // algo aqui
            </div>
        </div>

    </h:body>
</html>

css que organiza tudo:

/*CSS Reset*/
* {
    margin:0px;
    padding:0px;
}

body{ 
    font-size:12px;
    color:#000000;
    font-family:helvetica, arial, sans-serif;
    background-color: #000000;
    text-align:center; /* hack para o IE */
    margin: 0px;
}

#blocoCabecalho, #blocoRodape, #blocoConteudo {
    width: 750px;
    margin: 0 auto;
    height: auto;
    position: relative;
    padding: 2px 0px;
    text-align: left; /* "remédio" para o hack do IE */
}

#blocoCabecalho{
    background-image: url("resources/imagens/logo.png");

}

#blocoRodape{
    font-size:10px;
    color:#FFFFFF;
}

/*Footer internal*/
#blocoRodape a{
    color:#FFE773;
    text-decoration:none;
}

#blocoRodape a:hover{
    color:#6D89D5;
    text-decoration:underline;
}

#blocoConteudo{
    background-color: #000000;
}

#blocoConteudo table.dados tr td{
    padding:5px 10px;
}
prog.tiago

Boa noite!

Obrigado aix.

Consegui resolver o problema utilizando:

<h:panelGrid width="100%" style="text-align:right">

De tal forma que meu código ficou:

<h:form>
	<h:panelGrid width="100%" style="text-align:right">

		<h:panelGroup>
			<h:outputText value="Pesquisar matrícula: " />
			<p:inputText size="50" id="pesquisa"
				value="#{matriculadoBean.matriculado.matricula}" />
			<h:outputLabel />
			<p:commandButton value="..."
				actionListener="#{matriculadoBean.getListaFiltrada}"
				update="tableMatricula">
			</p:commandButton>
		</h:panelGroup>

	</h:panelGrid>
        ...

Obrigado Aix. Valeu pelas dicas!

R

prog.tiago ressuscitando este topico estou fazendo a mesma coisa que vc porém não funcinou,

tem que por algum css dentro do ?

prog.tiago

Olá Robson, tudo bom?

Não tinha visto essa mensagem…

Certamente vc já deve ter resolvido, mas não estou usando css não.

Abraços

Criado 20 de janeiro de 2012
Ultima resposta 25 de jun. de 2012
Respostas 6
Participantes 3