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

score 6 · Accepted Answer · answered Oct 19 '12 at 07:47

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.

You can override the stylesheets of primefaces. Take a look at this answer. [how-to-override-stylesheets-of-primefaces](http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) — Ravi Kadaboina, Oct 20 '12 at 01:17

score 1 · Answer 2 · answered Oct 19 '12 at 12:52

1

When supplying a customized theme you're supposed to create a theme file. PrimeFaces' default theme is Aristo. For more info about how to create a custom theme see the PrimeFaces Guide or the mobile PrimeFaces Guide.

If you however don't want to create a complete theme the default theme is applied. To override styles in the applied theme you need to use !important. (You already discovered this though.)

A useful tool I use is FireBug. FireBug shows which CSS rules are applied to an element and also which rules are overridden.

answered Oct 19 '12 at 12:52

siebz0r

18,867
14
64
107

2

The `!important` in stylesheets is not mandatory. It depends on how you're loading your stylesheets. If yours comes before PrimeFaces, then it would be overridden. The `!important` prevents that. But this is an ugly workaround. Better rearrange your `` into `` so that it's loaded *after* PrimeFaces one. OP's specific problem is slight different by the way. – BalusC Oct 19 '12 at 13:03
@BalusC IIRC the PrimeFaces CSS is always loaded before the JSF page. Hence it is not possible to rearrange the style sheets. – siebz0r Oct 19 '12 at 13:07
@siebz0r, it is possible to rearrange the stylesheets whichever way you need it. See also [how-to-override-stylesheets-of-primefaces](http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) – Ravi Kadaboina Oct 20 '12 at 01:15

score -1 · Answer 3 · answered Dec 02 '14 at 21:38

To everyone who has this problem, I just find a solution whit this:

<p:dialog header="Header" widgetVar="dlg1" showEffect="pop"
            styleClass="ui-page-theme-a ui-bar-inherit">

Add the primefaces inherit class to the dialog, and it will appear by default.

How to abandon the transparency of a PrimeFaces Dialog?

3 Answers3