Wie kann man die Transparenz eines PrimeFaces-Dialogs aufgeben?

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

Quelle

2012-10-16 Juvanis

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.

Quelle

2012-10-19 07:47:50 Juvanis

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

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

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.

Quelle

2012-10-19 12:52:50 siebz0r

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

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

Das ist nicht wahr. – BalusC

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.

Quelle

2014-12-02 21:38:46

Wie kann man die Transparenz eines PrimeFaces-Dialogs aufgeben?

Antwort

Verwandte Themen