Блог

Я пытался центрировать компонент на странице jsf, он выглядит примерно так:

 <p:panel header="Enter your credentials:" style="vertical-align:middle;">

    <h:panelGrid columns="2" styleClass="panelGridCenter">
                <h:outputText value="Login: " />
                <p:inplace id="Login">
                    <p:inputText value="Enter login" />
                </p:inplace>
            </h:panelGrid>
    </p:panel>
 

Я пытался ввести sth следующим образом:

 style="vertical-align:middle;"
 

Я пытался использовать класс css (у меня почти не было опыта работы с css):

 .panelGridCenter {
      margin: 0 auto;
      vertical-align:middle;
}
 

Но это не работает.
Можете ли вы дать мне какие-либо примеры или подсказки, как расположить этот компонент (панель) в центре страницы jsf?

p — primefaces

заранее спасибо

Попробуйте приведенный ниже код, я надеюсь, что этот ответ будет вашим вопросом

 <h:form>            
        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"  class="outer_table">
            <tr>
                <td>
                    <table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center">
                        <tr>
                            <td align="center">
                                <p:panel header="Login">
                                    <h:panelGrid columns="2" cellpadding="5">

                                        <h:outputLabel for="username" value="username" />
                                        <p:inputText id="username" value="#{loginBean.uname}" required="true" label="username"/>

                                        <h:outputLabel for="password" value="password" />
                                        <p:password id="password" value="#{loginBean.password}" required="true" label="password" />

                                        <p:commandButton value="Login"  action="#{loginBean.loginProject}" update=":growl"/>

                                    </h:panelGrid>
                                </p:panel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </h:form>
 

css

 <script type="text/css">
    html, body
    {
        margin:0px;
        padding:0px;
        width:100%;
        min-height:100%;
        height:100%;
    }
    .outer_table
    {
        width:100%;
        height:100%;
    }
</script>
 

Это может быть неуместно, поскольку я не могу ответить на ваш вопрос, но диалоговое окно (по центру по умолчанию) выглядит довольно круто для страницы входа в систему:

     <h:body>
        <p:growl id="growl" life="5000" autoUpdate="true" showDetail="true" escape="false"/>

        <h:form>    
            <p:dialog id="dialog" header="Login" footer="..." width="400" widgetVar="dlg" visible="true" closable="false" showEffect="clip" draggable="false" resizable="false" style="box-shadow: 7px 10px 5px #303030;"> 

                    <p:panelGrid columns="2" style="margin: 0 auto">
                        <h:outputText value="username:"/>            
                        <h:inputText value="#{loginBean.username}" id="username"/>            
                        <h:outputText value="password:"/>            
                        <h:inputSecret value="#{loginBean.password}" id="password"/>            
                    </p:panelGrid>
                    <p:commandButton  id="button" value="Login" action="#{loginBean.doLogin}" style="float:right"/>            

            </p:dialog>
        </h:form>   
    </h:body>
 

visible="true" автоматически отображает диалоговое окно после загрузки.

Вдохновленный этой статьей, также показывающей, как защитить части приложения.

Я не эксперт, но делюсь своим собственным опытом. После помещения панели в форму попробуйте поместить форму в div со стилем, как показано ниже:

 <div style="width:360px; margin: 10% auto 10% auto;">
<h:form>
    ....
</h:form>
</div>