Come abbandonare la trasparenza di una finestra di dialogo PrimeFaces?

Sto tentando di visualizzare un avviso utilizzando il componente Primefaces Dialog nella mia pagina JSF. Potrei visualizzare la finestra di dialogo, ma il mio problema è con la trasparenza/opacità di questa finestra di dialogo. Ho sovrascritto la proprietà di stile della finestra di dialogo impostando opacity: 1.0, ma non ha funzionato. Voglio abbandonare la trasparenza del dialogo. Come posso ottenere questo in un modo semplice?Come abbandonare la trasparenza di una finestra di dialogo PrimeFaces?

La mia pagina JSF:

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

uscita:

enter image description here

GPRS viene visualizzato nella pagina JSF, non è una parte della finestra di dialogo. Tuttavia, è visibile poiché la finestra di dialogo è trasparente.

Nota: sto usando primefaces-mobile-0.9.3.jar

fonte

2012-10-16 Juvanis

Ho provato l'override stile css del componente finestra di dialogo nella mia pagina JSF come quella (rilevi il ! importante espressione):

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

E in qualche modo il dialogo è meglio ora, sembra che:

enter image description here

Tuttavia, l'override del foglio di stile generale della libreria PrimeFaces nel mio progetto potrebbe aiutarmi di più per personalizzare la finestra di dialogo.

percorso del foglio di stile nel mio progetto web dinamico: WebContent/beni/css/style.css Questo potrebbe essere di riferimento per il quale di fronte a un problema simile.

fonte

2012-10-19 07:47:50 Juvanis

È possibile eseguire l'override dei fogli di stile delle primefaces. Dai un'occhiata a questa risposta. [how-to-override-stylesheets-of-primefaces] (http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) – Ravi

voto positivo per una buona risposta. :) – erencan

Quando si fornisce un tema personalizzato, è necessario creare un file di tema. Il tema predefinito di PrimeFaces è Aristo. Per ulteriori informazioni su come creare un tema personalizzato, consulta lo PrimeFaces Guide o lo mobile PrimeFaces Guide.

Se tuttavia non si desidera creare un tema completo, viene applicato il tema predefinito. Per sostituire gli stili nel tema applicato è necessario utilizzare !important. (L'hai già scoperto.)

Uno strumento utile che utilizzo è FireBug. FireBug mostra quali regole CSS sono applicate a un elemento e quali regole sono sovrascritte.

fonte

2012-10-19 12:52:50 siebz0r

Il '! Important' nei fogli di stile non è obbligatorio. Dipende da come stai caricando i tuoi fogli di stile. Se il tuo viene prima di PrimeFaces, allora sarà sovrascritto. '! Important' lo impedisce.Ma questa è una brutta soluzione. Meglio riorganizzare '' in '' in modo che sia caricato * dopo * PrimeFaces uno. Il problema specifico dell'OP è leggermente diverso a proposito. – BalusC

@BalusC IIRC i CSS di PrimeFaces vengono sempre caricati prima della pagina JSF. Quindi non è possibile riorganizzare i fogli di stile. – siebz0r

Questo non è vero. – BalusC

Per tutti coloro che hanno questo problema, ho appena trovato una soluzione di Pentecoste questo:

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

Aggiungere le primefaces ereditano classe per la finestra di dialogo, e apparirà per impostazione predefinita.

fonte

2014-12-02 21:38:46

Come abbandonare la trasparenza di una finestra di dialogo PrimeFaces?

risposta

Problemi correlati