Alinhar componentes primeFaces

Front-end
#1

Boa madruga amigos,

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

Vejam:

[code]

<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”/>
[/code]

Como eu deveria fazer?

#2

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>
#3

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

#4

[quote=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[/quote]

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;
}
#5

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!

#6

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

tem que por algum css dentro do ?

#7

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

#8