Problemas com form dentro de p:dialog - Primefaces 3.1 [Resolvido]
9 respostas
F
fabio_lpontes
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 :
|------------------------------------------------------------------|
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+
F
fabio_lpontes
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"><htmlxmlns="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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/></h:head><ui:includesrc="menu.xhtml"/><h:formstyle="text-align: center"id="form"><p:graphicImagevalue="/html/images/novo user.jpg"style="cursor: pointer"onclick="tag.show()"/><h:form><!-- <p:growl id="msgs" showDetail="true" /> --><p:dataTablevar="car"value="#{tableBean.carsSmall}"widgetVar="carsTable"emptyMessage="No cars found with given criteria"><f:facetname="header"><p:outputPanel><h:outputTextvalue="Procurar em todos os campos:"/><p:inputTextid="globalFilter"onkeyup="carsTable.filter()"style="width:150px"/></p:outputPanel></f:facet><p:columnfilterBy="#{car.model}"headerText="Nome"filterMatchMode="contains"><h:outputTextvalue="#{car.model}"/></p:column><p:columnfilterBy="#{car.year}"headerText="Descrição"><h:outputTextvalue="#{car.year}"/></p:column><p:columnfilterBy="#{car.color}"headerText="Tag Publica"filterMatchMode="endsWith"><h:outputTextvalue="#{car.color}"/></p:column><p:columnstyle="width:100px"headerText="Opçoes"><p:commandButtonupdate=":form:display"oncomplete="carDialog.show()"image="ui-icon ui-icon-pencil"title="Edit"onclick="tag.show()"><f:setPropertyActionListenervalue="#{car}"target="#{tableBean.selectedCar}"/><f:setPropertyActionListenervalue="#{true}"target="#{tableBean.editMode}"/></p:commandButton><p:commandButtonupdate=":form:display"oncomplete="confirmation.show()"image="ui-icon ui-icon-close"title="Delete"><f:setPropertyActionListenervalue="#{car}"target="#{tableBean.selectedCar}"/></p:commandButton></p:column></p:dataTable></h:form></h:form><p:confirmDialogmessage="Deseja deletar o registro?"showEffect="explode"hideEffect="explode"header="DSC"severity="alert"widgetVar="confirmation"><p:commandButtonvalue="Sim"update="cars"actionListener="#{tableBean.delete}"oncomplete="confirmation.hide()"/><p:commandButtonvalue="Não"onclick="confirmation.hide()"type="button"/></p:confirmDialog><p:dialogid="dialogtag1"header="Nova Tag"widgetVar="tag"showEffect="clip"hideEffect="clip"modal="true"resizable="false"><!-- header="Nova Tag" --><h:panelGridcolumns="2"cellpadding="3"><h:outputLabelfor="nometag"value="Nome da tag:"/><p:inputTextid="nometag"required="true"style="width:300px"/><h:outputLabelfor="descricaotag"value="Descrição:"/><p:inputTextid="descricaotag"required="true"style="width:300px"/><h:outputLabelfor="tagPublico"value="Tag Padrão?:"/><h:selectBooleanCheckboxid="tagPublico"/><h:outputLabelfor="conteudotag"value="Conteúdo:"/><p:inputTextareastyle="width:300px;height:100px;"effectDuration="400"id="conteudotag"required="true"/><f:facetname="footer"><p:commandButtonvalue="Salvar"/><p:commandButtontype="reset"value="Limpar"/></f:facet></h:panelGrid></p:dialog></html>
A
alissonvla
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+
F
fabio_lpontes
Será que se eu criar um styleClass para o p:dialog e configurar e deixar “text-align: left;”, funciona ?
A
alissonvla
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+
D
darkness_panic
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
F
fabio_lpontes
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)
Olá, realmente o ajuste no CSS (dialog.css) do Primefaces resolve o problema, aqui também funcionou.
Obrigado pela dica.
F
fabio_lpontes
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:
