2012-10-16 1 views
5

Ich versuche, eine Benachrichtigung für Primefaces Dialog Komponente in meiner JSF-Seite anzuzeigen. Ich könnte den Dialog anzeigen, aber mein Problem ist mit der Transparenz/Deckkraft dieses Dialogs. Ich habe die Stileigenschaft des Dialogs überschrieben, indem ich opacity: 1.0 setzte, aber es hat nicht funktioniert. Ich möchte die Transparenz des Dialogs aufgeben. Wie kann ich das auf einfache Weise erreichen?Wie kann man die Transparenz eines PrimeFaces-Dialogs aufgeben?

Meine JSF Seite:

<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> 

Ausgang:

enter image description here

GPRS in JSF-Seite angezeigt wird, ist es nicht ein Teil des Dialogs. Es ist jedoch sichtbar, da der Dialog transparent ist.

Hinweis: Ich verwende primefaces-mobile-0.9.3.jar

Antwort

5

Ich mag, dass zwingende CSS Stil des Dialogkomponente in meiner JSF Seite versucht haben (Anmerkung der ! important Ausdruck):

<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> 

Und irgendwie der Dialog nun besser ist, es sieht aus wie:

enter image description here

Das Überschreiben des allgemeinen Stylesheets der PrimeFaces-Bibliothek in meinem Projekt könnte mir jedoch bei der Anpassung des Dialogs helfen.

Der Weg des Sheet in meinem dynamischen Web-Projekt: WebContent/assets/css/style.css Dies könnte Referenz sein, für die ein ähnliches Problem.

+0

Sie können die Stylesheets von Primefaces überschreiben. Sehen Sie sich diese Antwort an. [How-to-override-Stylesheets-of-primefaces] (http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) – Ravi

+0

up vote für gute Antwort. :) – erencan

1

Wenn liefert ein individuelles Thema, das Sie angeblich sind eine Design-Datei zu erstellen. Das Standardthema von PrimeFaces ist Aristo. Weitere Informationen zum Erstellen eines benutzerdefinierten Designs finden Sie unter PrimeFaces Guide oder mobile PrimeFaces Guide.

Wenn Sie jedoch wollen nicht ein komplettes Thema der Standard-Theme angewandt werden, erstellen. Um Styles im verwendeten Design zu überschreiben, müssen Sie !important verwenden. (Sie bereits entdeckt, diese aber.)

Ein nützliches Werkzeug, das ich verwende Firebug ist. FireBug zeigt an, welche CSS-Regeln auf ein Element angewendet werden und welche Regeln außer Kraft gesetzt werden.

+2

Das '! Wichtig' in Stylesheets ist nicht zwingend erforderlich. Es hängt davon ab, wie Sie Ihre Stylesheets laden. Wenn Ihre Version vor PrimeFaces steht, wird sie überschrieben. Das '! Wichtig 'verhindert das.Aber das ist ein hässlicher Workaround. Ordnen Sie Ihr '' besser in '' so an, dass es * nach * PrimeFaces eins * geladen ist. OPs spezifisches Problem ist übrigens geringfügig anders. – BalusC

+0

@BalusC IIRC Das PrimeFaces CSS wird immer vor der JSF-Seite geladen. Daher ist es nicht möglich, die Stylesheets neu anzuordnen. – siebz0r

+1

Das ist nicht wahr. – BalusC

0

Für jeden, der dieses Problem hat, finde ich nur eine Lösung Whit diese:

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

In die primefaces Klasse zum Dialog erben, und es wird standardmäßig angezeigt.

Verwandte Themen