Problems opening a dialog

Question

I'm doing a web system in java jsf with primefaces, the problem I have is when I open a modal dialog, the shadow appears, covering everything. How could I solve it and not appear like the image?

enter image description here

This is the code of the button that calls the dialog when it is clicked:

<p:commandButton id="btnNuevo"
                                         icon="ui-icon-plusthick"
                                         title="Presione para Registrar una nueva categoria"
                                         styleClass="btn btn-primary"
                                         style="font-size:12px;font-family:Microsoft Sans Serif;"
                                         oncomplete="PF('dlg1').show();"/>

This is the code of the dialog:

<h:form id="frmCategoriaMantenimiento">
            <p:growl id="mensaje" showDetail="true" autoUpdate="true" life="2000"/>
            <p:dialog modal="true" id="dialog" focus="txtCategoria" style="font-family:Microsoft Sans Serif" resizable="false" header="Mantenimiento de Categoria" widgetVar="dlg1" showEffect="fade" hideEffect="fade" closable="false">
                <legend class="scheduler-border" style="font-size:13px"><strong style="font-size:12px;">Ingresar Datos</strong></legend>

                <div class="row" style="margin-right:3px">
                    <div class="col-sm-3" style="width:420px">
                        <div class="form-group" style="margin-bottom:4px;">
                            <h:outputLabel  for="txtCategoria"
                                            value="Categoria: "
                                            styleClass="control-label"
                                            style="font-size:13px;font-family:Microsoft Sans Serif;padding-right:8px;">
                                <h:outputLabel  value="(*)"
                                                styleClass="control-label"
                                                style="color: #8a6d3b"/>
                            </h:outputLabel>

                            <p:inputText id="txtCategoria"
                                         value="#{categoriaAction.categoriaDTO.c_t_categoria}"
                                         style="height:23px;width:280px;font-family:Microsoft Sans Serif"
                                         label="categoria">
                            </p:inputText>
                        </div>
                    </div>
                </div>
<p/>                    
                    <div>
                        <h:outputLabel value="(*) : Campos Requeridos"
                                       styleClass="control-label"
                                       style="color:#8a6d3b;font-size:12px;font-family:Microsoft Sans Serif;"/> 
                    </div>

                <f:facet name="footer">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group box-main-btn" style="margin-bottom:0px;height:29px">
                                <p:commandButton value="Grabar"
                                                 action="#{categoriaAction.Grabar(categoriaAction.categoriaDTO)}"
                                                 update="mensaje,txCodigo,txtCategoria,:frmCategoriaListado:tbCategoria"
                                                 ajax="true"
                                                 style="font-family:Microsoft Sans Serif;font-size:12px;width:100px;"
                                                 oncomplete="handleLoginRequest(xhr, status, args)">
                                    <p:confirm header="Mensaje" message="¿Desea Grabar?" icon="ui-icon-alert"/>
                                    <p:confirmDialog global="true" showEffectq="fade" hideEffect="fade" closable="false" style="font-family:Microsoft Sans Serif;">
                                        <p:commandButton value="Si"
                                                         type="button"
                                                         styleClass="ui-confirmdialog-yes"
                                                         icon="ui-icon-check"
                                                         update="data"
                                                         style="font-family:Microsoft Sans Serif;"/>
                                        <p:commandButton value="No"
                                                         type="button"
                                                         styleClass="ui-confirmdialog-no"
                                                         style="font-family:Microsoft Sans Serif;"
                                                         icon="ui-icon-close"/>
                                    </p:confirmDialog>
                                </p:commandButton>

                                <p:commandButton value="Cancelar"
                                                 style="font-family:Microsoft Sans Serif;height:28px;font-size:12px;width:100px;"
                                                 styleClass="btn btn-default"
                                                 action="#{categoriaAction.Cancelar()}"
                                                 update="frmCategoriaMantenimiento,:frmCategoriaListado:tbCategoria">
                                </p:commandButton>
                            </div>
                        </div>
                    </div>
                </f:facet>
            </p:dialog>
        </h:form>

The answerer has a point but this cannot be deduced from your code snippet. Please always create a [mcve], so we can see if what the answerer suggests is right — Kukeltje, Nov 20 '17 at 21:34

score 0 · Accepted Answer · answered Nov 20 '17 at 05:22

0

Insert into definition of your dialog this parameter:

appendTo="@(body)"

thus

<p:dialog modal="true" id="dialog" focus="txtCategoria" style="font-family:Microsoft Sans Serif" resizable="false" header="Mantenimiento de Categoria" widgetVar="dlg1" showEffect="fade" hideEffect="fade" closable="false" appendTo="@(body)">

you can find more information here:Link

answered Nov 20 '17 at 05:22

Milkmaid

1,659
4
26
39

Putting the form inside the dialog would also be needed – Jaqen H'ghar Nov 26 '17 at 18:35

Problems opening a dialog

1 Answers1