Page 1 of 1
Dialog customize but not overriding all existing dialogs
Posted: 06 Nov 2015, 22:05
by 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?
Re: Dialog customize but not overriding all existing dialogs
Posted: 06 Nov 2015, 23:58
by 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>
Re: Dialog customize but not overriding all existing dialogs
Posted: 09 Nov 2015, 22:35
by vished
thanks a lot
Re: Dialog customize but not overriding all existing dialogs
Posted: 10 Nov 2015, 12:44
by mert.sincan
You're welcome
Re: Dialog customize but not overriding all existing dialogs
Posted: 10 Nov 2015, 21:32
by 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;
}
Re: Dialog customize but not overriding all existing dialogs
Posted: 10 Nov 2015, 22:38
by 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>
Re: Dialog customize but not overriding all existing dialogs
Posted: 10 Nov 2015, 23:03
by 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;
}
Re: Dialog customize but not overriding all existing dialogs
Posted: 11 Nov 2015, 01:05
by 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;
Re: Dialog customize but not overriding all existing dialogs
Posted: 11 Nov 2015, 08:21
by vished
It works. thanks a lot
Re: Dialog customize but not overriding all existing dialogs
Posted: 11 Nov 2015, 12:34
by mert.sincan
Glad to hear, thanks