JSF - Primefaces confirmDialog da um "blockUI" em toda a tela!

Front-end
#1

Acho que ficou claro o que esta acontecendo no título do post “JSF - Primefaces confirmDialog da um “blockUI” em toda a tela!!”

Eu tô falando BlockUI, pq é esse componente do primefaces que faz isso, mas na verdade eu não criei um desses. Bom, pra ficar mais claro, vejam a imagem:

bom… aqui vai o código do meu template:

    <f:view contentType="text/html">
    
    		<ui:debug />
		<f:metadata>
			<ui:insert name="metadata" />
		</f:metadata>
    
        <h:head>
            <f:facet name="first">
                <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>My Finances</title>
            </f:facet>
            

            <link type="text/css" rel="stylesheet" href="/resources/css/default.css" />

            <style type="text/css">
                .ui-layout-north {
                    z-index:20 !important;
                    overflow:visible !important;;
                }

                .ui-layout-north .ui-layout-unit-content {
                    overflow:visible !important;
                }
            </style>
        </h:head>


        <h:body>

            <p:layout fullPage="true" >

                <p:layoutUnit id="top" position="north" size="50">
				<ui:include src="header.xhtml"/>
                </p:layoutUnit>

                <p:layoutUnit id="bottom" position="south" size="0">
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="300" resizable="true" closable="false" collapsible="true" header="Navegação" minSize="200">
				<ui:include src="menu.xhtml"/>
				</p:layoutUnit>

                <p:layoutUnit id="right" position="east" size="0" resizable="false" closable="false" collapsible="true"
                              style="text-align:center">
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center">
                    <h:form id="mainForm">
                    <p:messages autoUpdate="true" id="msgs" showDetail="true" closable="true" showSummary="true" />
					<ui:insert name="content"/>
                    </h:form>
                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>

PS: aceito sugestões kkkkk

e aqui o código da tabela:

           
	<p:dataTable id="table" var="grupo"  value="#{grupoController.lazyModel}" paginator="true" rows="10" filterEvent="enter"  
                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                 rowsPerPageTemplate="5,10,15" selectionMode="single"  lazy="true" paginatorPosition="bottom" emptyMessage="#{msg['global.nenhumRegistro']}">  
  
         <p:ajax event="rowSelect" listener="#{grupoController.onRowSelect}" update=":mainForm:display" oncomplete="grupoDialog.show()" /> 
  
		<p:column>
			<p:commandButton value="#{msg['button.edit']}" action="#{grupoController.actionEdit}" ajax="false">
			<f:setPropertyActionListener value="#{grupo}" target="#{grupoController.entity}" />
			</p:commandButton>

			<p:commandButton value="#{msg['button.delete']}" onclick="confirmation.show()" >
			<f:setPropertyActionListener value="#{grupo}" target="#{grupoController.entity}" />			
			</p:commandButton>								
		</p:column>
        
        <p:column headerText="#{msg['entity.codigo']}" sortBy="#{grupo.id}">  
            <h:outputText value="#{grupo.id}" />  
        </p:column>  
  
        <p:column headerText="#{msg['entity.descricao']}" sortBy="#{grupo.descricao}" filterBy="#{grupo.descricao}">  
            <h:outputText value="#{grupo.descricao}" />  
        </p:column>  
  
        <p:column headerText="#{msg['entity.grupo.tipo']}" sortBy="#{grupo.tipo}" filterBy="#{grupo.tipo}">  
            <h:outputText value="#{grupo.tipo}" />  
        </p:column>    	
    </p:dataTable>  
  

 		<!--  CONFIRM DELETE -->  
                    <p:confirmDialog message="#{msg['label.confirm.delete']}" showEffect="bounce" hideEffect="explode"  
                                     header="#{msg['label.dialog.alert']}!" severity="alert" widgetVar="confirmation">  
  
                        <h:commandButton value="#{msg['button.dialog.yes']}" 
                                   actionListener="#{grupoController.delete}"
                                   process="@form" update="mainForm:table" />  

                        <h:commandButton value="#{msg['button.dialog.no']}" onclick="confirmation.hide()" type="button" />  
                    </p:confirmDialog>

vlwww pessoal!!!

#2

Tente colocar apendToBody = true no seu dialog.

#3

putz… com duas palavras vc resolveu o problema! kkkkkkkkkk
Agora ele trava todo o ‘background’ e deixa só a dialog ‘clicavel’ (setEnabled(true) lol)

este é o comportamento padrão??
se for, então ta [RESOLVIDO]

vlw

#4

cara, vou aproveitar a oportunidade e dizer:

                        <h:commandButton value="#{msg['button.dialog.yes']}" 
                                   actionListener="#{grupoController.delete}"
                                   process="@form" update=":mainForm:table"/>

quando clico no botão, o action não é chamado…

public void delete(ActionEvent event) {
	System.out.println("--------------------------------------> CHAMOU");
	try {
	    getBaseService().delete(entity);
	    displayInfoMessageToUser("Deleted With Sucess");
	    System.out.println("--------------------------------------> DELETOU");
	} catch (Exception e) {
	    displayErrorMessageToUser("Ops, we could not delete. Try again later");
	    e.printStackTrace();
	
	}
    }

PS: greetz ao: Aplicação Completa Primefaces + Tomcat

#5