Hi All,
I am working with jsf ( using richfaces component) , trying to create a login page using rich panel , i want this rich panel not to be in full page width
( width with only 50% and the panel to be in the center of the page )
I have the following code :
[code]
<rich:panel id="loginPanel" header="#{messages.loginPage}">
<h:form>
<h:panelGrid columns="2" width="50%">
<rich:layout>
<rich:layoutPanel position="center" width="50%">
<h:outputLabel value="Login Id" />
<h:inputText required="true" value="#{validationBean.id}"
requiredMessage="can not be empty" id="idd" />
<h:outputLabel value="Password" />
<h:inputSecret required="true" value="#{validationBean.password}"
requiredMessage="can not be empty" />
</rich:layoutPanel>
</rich:layout>
</h:panelGrid>
<h:commandButton value="Login" action="#{validationBean.enter}" />
</h:form>
<h:messages id="error" style="color:red;" />
</rich:panel>
[/code]
but the above is not producing a panel with width 50% of page and it is not at the center of the page
any suggestion
1) You can use style and styleClass attributes of rich:panel
2) You can wrap your code to <center></center> tag. It's sure thing which works well even in very old browsers.
3) You also can warp your rich:panel to a tag which supports width attribute.