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.
Abrir p:dialog maximizado primefaces 6.1?
V
22 Respostas
V
Sem solução ainda. Esperava encontrar algo do tipo: dialog.maximized = true e por default o P.dialog viria maximizado…
M
Você vai ter que usar css
V
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?
M
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">
M
Eu usei até o seu código e funcionou normal
O seu dialog ta ficando amarelo?
V
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>
M
Então o seu css não esta sendo chamado
V
Então, na página uso o .css em outro lugar e ele é aplicado sim. Menos no Dialog!
M
Inspeciona o dialog no navegador, printa e cola aqui fazendo favor
B
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…
M
Com o p:dialog não precisa… Basta por height: 100% que funciona
B
tenta…
M
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
B
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…
V
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.
M
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
M
<?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;
}
V
M
Você não mostrou os valores dos atributos pela print, coloca top: 0 !important no seu css, pq se n o primefaces vai calcular a altura em que seu dialog vai se posicionar
V
Bom dia Mike, no print mostrou height:auto e top:195px mesmo o meu css estando da seguinte maneira:
.ui-dialog.minha-classe {
width: 100% !important;
height: 100% !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
}
o estilo não estar sendo aplicado no p:dialog. Não sei o motivo desse problema…
J
Prime faces e jsf ja era, acordem Angular eh mto superior ao prime e Jsf.
Criado 24 de maio de 2018
Ultima resposta 27 de mai. de 2018
Respostas 22
Participantes 4
Alura Sistemas operacionais: entenda seu conceito e suas funções Descubra o que são sistemas operacionais, suas funções e tipos. Aprenda tudo de forma clara e objetiva. Não perca tempo!
Casa do Codigo Aprenda JavaScript com Dashboards: Seus primeiros passos... Por Lucas Tauil — Casa do Codigo
Fiap Pos-Tech: Front-end Engineering Pós-Graduação para desenvolver habilidades avançadas em tecnologias front-end, com foco em...