Bom dia pessoal, alguém poderia me dizer como abrir o p:dialog maximizado com o PrimeFaces 6.1?
utilizei width:100% height:100% mas não funcionou. A altura não funciona.
Sem solução ainda. Esperava encontrar algo do tipo: dialog.maximized = true e por default o P.dialog viria maximizado…
Você vai ter que usar css
Poderia me dá uma dica?
CSS
.ui-dialog.ajustaDialog {
position: absolute;
width: calc(100% - 100px) !important;
height: calc(100% - 100px) !important;
background-color: yellow;
}
XHTML
[CODE]
< div class=“ui-fluid”>
<p:dialog header=“Categoria” styleClass="ajustaDialog"
widgetVar=“dCategoria” modal=“true” maximizable="true"
position=“center” responsive=“true”>
[\CODE]
Sera alguma coisa do PrimeFaces?
Se colocar
<p:dialog header="Sub Categoria"
style=“width:100% !important;height: 100% !important;”
funciona no eclipse, mas não funciona no browser. ja limpei o cache.
Poderiam me dizer onde estou errando, por favor?
Eu fiz aqui da seguinte forma:
.ui-dialog.dialog-teste
{
width: 100% !important;
height: 100% !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
}
<p:dialog widgetVar="novoEnderecoDialog" id="novoEnderecoDialog"
header="Novo Endereço" styleClass="dialog-teste">
Eu usei até o seu código e funcionou normal
O seu dialog ta ficando amarelo?
Mike, obrigado pela resposta, mas já tentei alterar e realmente não estar sendo aplicado o CSS no p:Dialog. Não estar ficando amarelo mesmo…
<h:head>
<h:outputStylesheet library=“css” name=“estilos.css” />
</h:head>
<f:view>
<h:form>
//codigo da pagina
</h:form>
<p:dialog header=“Categoria” styleClass=“ajustaDialog”
widgetVar="dCategoria" modal="true" maximizable="true"
position="center" responsive="true">
<h:form>
código Dialog aqui.
</h:form>
</p:dialog>
</body>
</f:view>
Então o seu css não esta sendo chamado
Então, na página uso o .css em outro lugar e ele é aplicado sim. Menos no Dialog!
Inspeciona o dialog no navegador, printa e cola aqui fazendo favor
width vai acatar o 100% mais o height vc vai ter que por a altura da sua janela no seu monitor exemplo: se vc tem um monitor de 1024x768 vc pôe no height=“768” e mais nada…
Com o p:dialog não precisa… Basta por height: 100% que funciona
tenta…
Eu uso o componente p:dialog …
Não é só a altura que não esta sendo aplicada, mas sim todos os atributos que ele definiu no arquivo .css
traduzindo: eu disse que no componente “Dialog” do primefaces, no Atributo “height”, é atribuído apenas o numero “768” e mais nada…
acho que agora fui claro…
coloco pra inspecionar o elemento e tenho:
minha-classe do css estar nesse trecho do codigo
/ <div id=“j_idt98” class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container minha-classe role=“dialog” aria-labelledby=“j_idt98_title” aria-hidden=“false” aria-live=“polite” style=“width: auto; height: auto; left: 0px; top: 195px; z-index: 1018; display: block;”>[/code]
Abaixo disso tem um div com o header do p:dialog. ok
e logo abaixo esse div aqui mostra a estrutura do dialog. O <form id="formDentroDialog>
datatable… mas como pode ver não mostra a classe: minha-classe (do css)
div class=“ui-dialog-content ui-widget-content” style=“height: auto;”> ==$0
Não entendo bem, mas tipo: 2 div apontando pro mesmo elemento e uma tem a classe do .css e o outra não.
Tentei o width:100% e height:100% no eclipse ate funciona, mas no browser so funciona o width.
Pro dialog ficar maximizado você só tem que alterar a primeira div, que é a que tema classe ui-dialog
Inspeciona novamente, seleciona a primeira div, printa a tela de inspeção e posta aqui.
Pq é só criar uma classe css, colocar !important nos atributos, referenciar a classe no atributo styleClass e dar ctrl F5 no navegador para limpar o cache.
Obs: Se você tem width na classe e width no atributo style do componente, o que vai valer é o do syle
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSF</title>
<h:outputStylesheet library="style" name="components.css"></h:outputStylesheet>
</h:head>
<h:body>
<p:dialog visible="true" styleClass="meu-dialog-teste">
<h:outputText value="Teste: " />
<p:inputText value=""></p:inputText>
</p:dialog>
</h:body>
</html>
.ui-dialog.meu-dialog-teste
{
width: 100% !important;
height: 100% !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
}
