Desconfigurando todo o Layout ao exibir a mensagem?

Front-end
,
#1

Bom dia Amigos,

Estou com um problema em minha página XHTML de cadastro, onde ao exibir a mensagem de erro da “requiredMessage” do primefaces, ele desconfigura todo o layout da página conforme imagem abaixo:

Screenshot_8.jpg837×550 26 KB

Segue código da página:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

	<h:head>
	<h:outputStylesheet library="css" name="estilos.css" />
</h:head>

<h:body>
<h:form id="form">
	<p:layout fullPage="true">
	
		<div id="telaLogin" align="center">
			<p:layoutUnit position="center" size="400" resizable="true"
				closable="true" collapsible="true">

				<h:panelGrid id="pLogin" cellspacing="10" resizable="true"
					bgcolor="white" columns="3"
					style="position: absolute;top:140px; left: 450px;">
					<p:graphicImage url="imgs/logo-editada.jpg" width="140px"
						height="70px"
						style="position: absolute; bottom:350px; left:200px;" />
					<br />
					<p:outputLabel style="font-size:13px;position:absolute;left:170px;">Digite aqui os dados para cadastro:</p:outputLabel><br/>
					<p:outputLabel>Nome:</p:outputLabel>
					<p:inputText id="usuario" value="#{usuarioBean.usuario.nome}"></p:inputText><br/>
					<p:outputLabel>CPF:</p:outputLabel>
					<p:inputText id="cpf" required="true" value="#{usuarioBean.usuario.cpf}"></p:inputText><br/>
					<p:outputLabel>Telefone:</p:outputLabel>
					<p:inputText id="telefone" value="#{usuarioBean.usuario.telefone}"></p:inputText><br/>
					<p:outputLabel>E-mail:</p:outputLabel>
					<p:inputText id="email" value="#{usuarioBean.usuario.email}"></p:inputText>
					<p:message for="cpf" dysplay="icon" />
					<p:outputLabel>Senha:</p:outputLabel>
					<p:password for="pwd1" value="#{usuarioBean.usuario.senha}" label="Senha" match="pwd2" required="true"></p:password><br/>
					<p:outputLabel>Repita a senha:</p:outputLabel>
					<p:password id="pwd2" value="#{usuarioBean.usuario.senha}" requiredMessage="ou as senhas não coincidem" label="Confirme a senha:" required="true" ></p:password><br/>
					<p:commandButton update="pLogin" action="#{usuarioBean.salvarUsuario(usuario)}" value="Cadastrar" />
					<p:commandButton style="position: absolute;left:240px;" value="Cancelar" href="/index.jsf"/>
					<p:link value="Esqueci minha senha" style="position:absolute;top:290px;left:160px;font-size:12px;"></p:link>
				</h:panelGrid>
					
			</p:layoutUnit>
		</div>
		
	</p:layout>
	</h:form>
</h:body>
</html>
#2

cara isso é o teu CSS que não alinha corretamente seus elementos.

talvez vc precise de uma sub-div para os seus botões e outra para os inputs e ai o css da mensagem de erro não deve atrapalhar a renderização dos botões. mas é exclusivo do css no seu html final.