Centralizar um Panel

23 de novembro de 2011 4 respostas

eliflavio 23 de novembro de 2011

Como eu faço para que o Panel abaixo fique centralizado na vertical e horizontal dentro do browser?

<h:body>
<h:form>  
    <p:panel id="janela" header="Enter your passwords">  
        <h:panelGrid columns="2">  
            <h:outputText value="Non-Feedback: " />  
            <p:password value="#{passwordBean.password1}" feedback="false" />  
  
            <h:outputText value="Feedback: " />  
            <p:password value="#{passwordBean.password2}" />  
  
            <h:outputText value="Inline Feedback: " />  
            <p:password value="#{passwordBean.password4}" inline="true" />  
  
            <h:outputText value="Custom Feedback: " />  
            <p:password value="#{passwordBean.password5}"  
                        inline="true"/>  
        </h:panelGrid>  
    </p:panel>  
  
</h:form>

Eli Flávio Bortolotte

4 Respostas

benignoms 23 de nov. de 2011

Cria uma classe de estilo:

.alignTop {
    vertical-align:top;
}

Coloca um

<h:panelGrid style="width:100%; margin: 0 auto;" columnClasses="alignTop">
  <p:panel></p:panel>
</h:panelGrid>

Caso tenha mais de uma coluna você deverá repetir no columnClasses=“alignTop,alignTop,alignTop,alignTop…” 1 para cada coluna.

eliflavio 23 de nov. de 2011

benignoms:
Cria uma classe de estilo:
.alignTop {
    vertical-align:top;
}
Coloca um
<h:panelGrid style="width:100%; margin: 0 auto;" columnClasses="alignTop">
  <p:panel></p:panel>
</h:panelGrid>
Caso tenha mais de uma coluna você deverá repetir no columnClasses=“alignTop,alignTop,alignTop,alignTop…” 1 para cada coluna.

Fiz o que você sugeriu, mas ficou exatamente do mesmo jeito.

eliflavio 23 de nov. de 2011

Consegui centralizar desta forma:

<h:panelGrid style="width:100%; height:100%;" columns="1">
<h:form>
<p:panel header="Enter your passwords" 
		 style="width:400px; margin-left:auto; margin-right:auto;">
		<h:panelGrid columns="2">  
            <h:outputText value="Non-Feedback: " />  
            <p:password value="#{passwordBean.password1}" feedback="false" />  
  
            <h:outputText value="Feedback: " />  
            <p:password value="#{passwordBean.password2}" />  
  
            <h:outputText value="Inline Feedback: " />  
            <p:password value="#{passwordBean.password4}" inline="true" />  
  
            <h:outputText value="Custom Feedback: " />  
            <p:password value="#{passwordBean.password5}"  
                        inline="true"/>  
        </h:panelGrid>
</p:panel>
</h:form> 
</h:panelGrid>

eliflavio 25 de nov. de 2011

eliflavio:

Consegui centralizar desta forma:

<h:panelGrid style="width:100%; height:100%;" columns="1">
<h:form>
<p:panel header="Enter your passwords" 
		 style="width:400px; margin-left:auto; margin-right:auto;">
		<h:panelGrid columns="2">  
            <h:outputText value="Non-Feedback: " />  
            <p:password value="#{passwordBean.password1}" feedback="false" />  
  
            <h:outputText value="Feedback: " />  
            <p:password value="#{passwordBean.password2}" />  
  
            <h:outputText value="Inline Feedback: " />  
            <p:password value="#{passwordBean.password4}" inline="true" />  
  
            <h:outputText value="Custom Feedback: " />  
            <p:password value="#{passwordBean.password5}"  
                        inline="true"/>  
        </h:panelGrid>
</p:panel>
</h:form> 
</h:panelGrid>

Desta forma funciona no Chrome e Firefox, mas no IE fica alinhado à esquerda.

Criado 23 de novembro de 2011

Ultima resposta 25 de nov. de 2011

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados