Dialog customize but not overriding all existing dialogs

[vished]

Dear all,

I would like to customize the .ui-dialog-content in a Dialog in JSF primefaces.
But I don´t want to override the other dialogs.
It´s only for one dialog - I don´t wanna have a padding for the dialog content (it´s a dialog for a image). This means padding: 0px;

How can I do this?

[mert.sincan]

I think you can try with this css;

Code: Select all

/*css */
.MyDialog.ui-dialog .ui-dialog-content {
   padding: 0px !important;
}

/*xhtml*/
<p:dialog styleClass="MyDialog" ..>
   ...
</p:dialog>

[vished]

thanks a lot

[mert.sincan]

You're welcome

[vished]

I would like to override also the background (overlay). But I don´t want to override all others.
I tried this but this is not working.
Any idea?

Code: Select all

.custom-dialog.ui-widget-overlay {
		background: #000000 none repeat scroll 0 0 !important;
		opacity: 1.0 !important;
	}

[mert.sincan]

I think you are using modal dialog. Therefore, If you want to change .ui-widget-overlay in modal dialog, you need to write a JS code. styleClass attribute adds a class into dialog content.
Please try;

Code: Select all

//CSS code
.custom-dialog.ui-widget-overlay {
   background: #000000 none repeat scroll 0 0 !important;
   opacity: 1.0 !important;
}

//JS code
function addCustomClass() {
   var modalDialogId = PF('MyDialog').cfg.id; // MyDialog is widgetVar of dialog.
   $(PrimeFaces.escapeClientId(modalDialogId + "_modal")).addClass('custom-dialog');
}

//Xhtml Example
<p:commandButton value="Modal" oncomplete="PF('MyDialog').show();addCustomClass();"/>

<p:dialog header="Modal Dialog" widgetVar="MyDialog" modal="true" height="50" responsive="true">
   <h:outputText value="This is a Modal Dialog." />
</p:dialog> 

[vished]

hm no it´s not working. I got: addCustomClass is not defined




Here my code:

Code: Select all

<p:commandLink oncomplete="PF('showPictureDialog').show();addCustomClass();"
										ajax="true" immediate="true">

Code: Select all

	<script type="text/javascript" >
		function addCustomClass() {
   			var modalDialogId = PF('showPictureDialog').cfg.id;
   		$(PrimeFaces.escapeClientId(modalDialogId + "_modal")).addClass('custom-dialog');
		}
	</script>

Code: Select all

<p:dialog id="showPictureDialog" widgetVar="showPictureDialog"
			responsive="true" appendToBody="true" position="center"
			showHeader="true" styleClass="custom-dialog"
			header="My Picture" maximizable="false"
			minimizable="false" dynamic="false" modal="true" resizable="false"
			closable="true" closeOnEscape="true">

Code: Select all

	.custom-dialog.ui-widget-overlay {
		background: #000000 none repeat scroll 0 0 !important;
		opacity: 1.0 !important;
	}

[mert.sincan]

I couldn't replicate it. I attached a sample xhtml. Please try with;
test.xhtml

Code: Select all

<ui:composition 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"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .custom-dialog.ui-widget-overlay {
                background: #000000 none repeat scroll 0 0 !important;
                opacity: 1.0 !important;
            }
        </style>

        <script type="text/javascript">
            function addCustomClass() {
                var modalDialogId = PF('showPictureDialog').cfg.id;
                $(PrimeFaces.escapeClientId(modalDialogId + "_modal")).addClass('custom-dialog');
            }
        </script>
    </ui:define>
    
    <ui:define name="content">

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect whiteback GreenBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h2 class="BigTopic">Dialog</h2>
                            <h:form>

                                <p:commandLink oncomplete="PF('showPictureDialog').show();addCustomClass();"
                                               ajax="true" immediate="true">TEST</p:commandLink>

                                <p:dialog id="showPictureDialog" widgetVar="showPictureDialog"
                                          responsive="true" appendToBody="true" position="center"
                                          showHeader="true" header="My Picture" maximizable="false"
                                          minimizable="false" dynamic="false" modal="true" resizable="false"
                                          closable="true" closeOnEscape="true">
                                    <h:outputText value="This is a Modal Dialog." />
                                </p:dialog>

                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>

Screenshot;

[vished]

It works. thanks a lot

[mert.sincan]

Glad to hear, thanks