How to abandon the transparency of a PrimeFaces Dialog?

Question

I'm trying to display an alert using Primefaces Dialog component in my JSF page. I could display the dialog, but my problem is with the transparency/opacity of this dialog. I have overridden the style property of the dialog by setting opacity: 1.0, but it didn't work. I want to abandon the dialog's transparency. How can I achieve this in a simple way?

My JSF page:

<f:view xmlns="http://www.w3.org/1999/xhtml"
....
renderKitId="PRIMEFACES_MOBILE">
....
<pm:page title="Mobile Reports">
<pm:view id="reports" swatch="b">
<h:form>
<pm:content>
<div>
<h:form>
    ....
    <p:dialog id="myDialog"
        header="ERROR"
        widgetVar="dlg"
        modal="true"
        style="opacity: 1.0;"
        appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
    </p:dialog>
    ....
    <p:commandButton id="contractInfo" action="ContractInfo.xhtml"
        value="Contract Information" style="width:100%;"
        onerror="dlg.show();">
    </p:commandButton>
    ....
</h:form>
</div>
</pm:content>
</h:form>
</pm:view>
</pm:page>
</f:view>

Output:

enter image description here

GPRS is displayed in JSF page, it's not a part of the dialog. However, it is visible since the dialog is transparent.

Note: I'm using primefaces-mobile-0.9.3.jar

Juvanis Juvanis · Accepted Answer · 2012-10-19T07:47:50

I've tried overriding css style of the dialog component in my JSF page like that (Remark the !important expression):

<p:dialog id="myDialog" header="ERROR" widgetVar="dlg" modal="true"
        style="background: gray !important;" appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
</p:dialog>

And somehow the dialog is better now, it looks like:

enter image description here

However, overriding the general stylesheet of PrimeFaces library in my project might help me more for customizing the dialog.

The stylesheet's path in my dynamic web project: WebContent/assets/css/style.css This could be reference for whom facing a similar problem.

How to abandon the transparency of a PrimeFaces Dialog?

3 Answers