Olá Pessoal,
Estou com problemas na utilização de um formulario dentro de um <p:dialog>
Quando adiciono um “cabeçalho” no dialog, o formulario fica alinhado com o tamanho da palavra escrita no header e não no começo do dialog.
Alguem sabe como corrigir isso ?
segue um desenho besta de como ta ficando e como deveria ficar.
ta ficando :
|------------------------------------------------------------------|
| Nova Tag |
| <espaço> nome da tag:_______________ |
| <espaço> descricao: _______________ |
| ------------------------------------------------------------------ |
Deveria ficar:
|------------------------------------------------------------------|
| Nova Tag |
| Nome da tag:_______________ |
| Descricao: _______________ |
| ------------------------------------------------------------------ |
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.link{
cursor: pointer;
}
.header{
text-align: left;
}
</style>
<!-- <link rel="stylesheet" href="/html/css/style.css"/> -->
</h:head>
<h:form>
<p:dialog id="dialogtag1" header="Nova Tag" widgetVar="tag" showEffect="clip" hideEffect="clip" modal="true" resizable="false">
<h:panelGrid columns="2" cellpadding="3">
<h:outputLabel for="nometag" value="Nome da tag:" />
<p:inputText id="nometag" required="true" style="width:300px"/>
<h:outputLabel for="descricaotag" value="Descrição:" />
<p:inputText id="descricaotag" required="true" style="width:300px"/>
<h:outputLabel for="tagPublico" value="Tag Padrão?:" />
<h:selectBooleanCheckbox id="tagPublico"/>
<h:outputLabel for="conteudotag" value="Conteúdo:" />
<p:inputTextarea style="width:300px;height:100px;" effectDuration="400"
id="conteudotag" required="true"/>
<f:facet name="footer">
<p:commandButton value="Salvar" />
<p:commandButton type="reset" value="Limpar" />
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
</html>
cara,
isso provavelmente é problema de css.
vo deixar um dica para vc nao ficar quebrando a cabeça, qdo vc for usar dialog com form, vc coloca um form dentro do dialog, e seu dialog ão pode ficar dentro do seu form principal, pq senão nao vai funcionar.
t+
Boa Tarde Alisson,
Vc se refere ao css do proprio componente p:dialog ?
eu to achando que esse componente não permite deixar o inicio do conteudo junto com inicio do dialog…
Segue o codigo corrigido conforme dica…
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<ui:include src="menu.xhtml" />
<h:form style="text-align: center" id="form">
<p:graphicImage value="/html/images/novo user.jpg"
style="cursor: pointer" onclick="tag.show()" />
<h:form>
<!-- <p:growl id="msgs" showDetail="true" /> -->
<p:dataTable var="car" value="#{tableBean.carsSmall}"
widgetVar="carsTable"
emptyMessage="No cars found with given criteria">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Procurar em todos os campos:" />
<p:inputText id="globalFilter" onkeyup="carsTable.filter()"
style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Nome"
filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="#{car.year}" headerText="Descrição">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="#{car.color}" headerText="Tag Publica"
filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
<p:column style="width:100px" headerText="Opçoes">
<p:commandButton update=":form:display"
oncomplete="carDialog.show()" image="ui-icon ui-icon-pencil"
title="Edit" onclick="tag.show()">
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
<f:setPropertyActionListener value="#{true}"
target="#{tableBean.editMode}" />
</p:commandButton>
<p:commandButton update=":form:display"
oncomplete="confirmation.show()" image="ui-icon ui-icon-close"
title="Delete">
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
</h:form>
<p:confirmDialog message="Deseja deletar o registro?"
showEffect="explode" hideEffect="explode" header="DSC" severity="alert"
widgetVar="confirmation">
<p:commandButton value="Sim" update="cars"
actionListener="#{tableBean.delete}" oncomplete="confirmation.hide()" />
<p:commandButton value="Não" onclick="confirmation.hide()"
type="button" />
</p:confirmDialog>
<p:dialog id="dialogtag1" header="Nova Tag" widgetVar="tag" showEffect="clip"
hideEffect="clip" modal="true" resizable="false">
<!-- header="Nova Tag" -->
<h:panelGrid columns="2" cellpadding="3">
<h:outputLabel for="nometag" value="Nome da tag:" />
<p:inputText id="nometag" required="true" style="width:300px" />
<h:outputLabel for="descricaotag" value="Descrição:" />
<p:inputText id="descricaotag" required="true" style="width:300px" />
<h:outputLabel for="tagPublico" value="Tag Padrão?:" />
<h:selectBooleanCheckbox id="tagPublico" />
<h:outputLabel for="conteudotag" value="Conteúdo:" />
<p:inputTextarea style="width:300px;height:100px;"
effectDuration="400" id="conteudotag" required="true" />
<f:facet name="footer">
<p:commandButton value="Salvar" />
<p:commandButton type="reset" value="Limpar" />
</f:facet>
</h:panelGrid>
</p:dialog>
</html>
entao,
deve ser algum css que vc fez e ele ta se aplicando ao seu dialog, vc pode usar firebug do firefox para ver o que esta acontendo, provavelmente, vc vai ter que fazer algum css para resolver esse problema.
PS: observe que seu codigo ta com 2 h:form.
t+
Será que se eu criar um styleClass para o p:dialog e configurar e deixar “text-align: left;”, funciona ?
isso, vc vai usar styleClass.
Agora vc vai ter que testar, pq eu nao sei se vai funcionar com text-align, css não é meu forte, conheco o necessario… 
t+
Olá, tive o mesmo problema com o meu projeto. O problema neste caso é a propriedade Header do <p:dialog>, quanto mais caracteres escritos no header mais ele alinha a direita,
no meu caso, como não encontrei nenhuma outra solução até o momento, optei por deixar o header sem nada escrito e funcionou.
Espero ter ajudado, e caso alguém encontre alguma solução melhor posta ai.
Att
Bom dia pessoal,
Depois de muito trabalho, descobri qual era o real problema do alinhamento.
Primeiramente, lembro que eu estou utilizando o primefaces 3.0 e nao o 2.1
Dentro do Jar do primefaces referente a propriedade dialog, ha um CSS de configuração. (primefaces-3.0.M3\META-INF\resources\primefaces\dialog\dialog.css)
Altere o codigo de :
.ui-dialog {
position: fixed;
padding: 0px;
overflow: hidden;
visibility: hidden;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
padding-right: 0px;
height: 14px;
position: relative;
}
Para:
.ui-dialog {
position: absolute;
padding: .2em;
width: 300px;
overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
Para mim, resolveu…
Olá, realmente o ajuste no CSS (dialog.css) do Primefaces resolve o problema, aqui também funcionou.
Obrigado pela dica.
Salve Pessoal,
O primefaces disponibilizou uma nova versão do css do p:dialog re resolve totalmente esse problema.
No ultimo CSS que eu passei para vcs, ainda ficava meio zuado o local onde fechava o dialog(ficava muito na esquerda).
Altere todo arquivo dialog.css do diretorio que eu ja tinha mencionado para o codigo abaixo:
.ui-dialog { position: fixed; padding: 0; overflow: hidden;}
.ui-dialog .ui-dialog-titlebar { padding: .4em .4em .4em 1em; position: relative; border:0px; }
.ui-dialog .ui-dialog-title { float: left; margin: .3em 16px .1em 0; }
.ui-dialog .ui-dialog-content {position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-minimize,.ui-dialog .ui-dialog-titlebar-maximize { position: relative; float: right; margin: 0px; top:0px; padding: 1px; }
.ui-dialog .ui-dialog-titlebar-close span, .ui-dialog .ui-dialog-titlebar-minimize span, .ui-dialog .ui-dialog-titlebar-maximize span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus, .ui-dialog .ui-dialog-titlebar-minimize:hover, .ui-dialog .ui-dialog-titlebar-minimize:focus, .ui-dialog .ui-dialog-titlebar-maximize:hover, .ui-dialog .ui-dialog-titlebar-maximize:focus { padding: 0; }
.ui-dialog-footer {padding: .4em 1em; border-width: 1px 0 0 0;text-align:left;}
.ui-dialog-docking-zone {position: fixed;bottom: 0;left: 0;}
.ui-dialog-minimizing {border: 2px dotted gray;}
.ui-confirm-dialog-severity {float: left; margin: 3px 7px 20px 0;}
