Jak zrezygnować z przejrzystości okna dialogowego PrimeFaces?

Próbuję wyświetlić alert przy użyciu komponentu Primefaces Dialog na mojej stronie JSF. Mogę wyświetlić okno dialogowe, ale moim problemem jest przezroczystość/krycie tego okna dialogowego. Przesłoniłem właściwość stylu okna dialogowego, ustawiając opacity: 1.0, ale nie zadziałało. Chcę porzucić przejrzystość okna dialogowego. Jak mogę to osiągnąć w prosty sposób?Jak zrezygnować z przejrzystości okna dialogowego PrimeFaces?

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

wyjściowa:

enter image description here

GPRS jest wyświetlana na stronie JSF, że nie jest to część okna dialogowego. Jest to jednak widoczne, ponieważ okno dialogowe jest przezroczyste.

Uwaga: Używam primefaces-Mobile 0.9.3.jar

Źródło

2012-10-16 Juvanis

próbowałam unieważniając css styl składnika dialogowym w moją stronę JSF jak ten (Uwaga Podana ! important wyrażenie):

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

I jakoś okno jest lepiej teraz wygląda:

enter image description here

Jednak przesłonięcie ogólnego arkusza stylów biblioteki PrimeFaces w moim projekcie może mi pomóc w dostosowaniu okna dialogowego.

ścieżka arkusza stylów w mojej dynamiczny projekt WWW: WebContent/assets/css/style.css Może to być odniesienie do kogo skierowana podobny problem.

Źródło

2012-10-19 07:47:50 Juvanis

Można zastąpić arkusze stylów z dodatkami. Spójrz na tę odpowiedź. [how-to-override-stylesheets-of-primefaces] (http://stackoverflow.com/questions/8578494/how-to-override-stylesheets-of-primefaces/8581199#8581199) – Ravi

do góry głosuj za dobrą odpowiedzią. :) – erencan

Podczas dostarczania dostosowanego motywu należy utworzyć plik motywu. Domyślnym motywem PrimeFaces jest Aristo. Aby uzyskać więcej informacji o tworzeniu niestandardowego motywu, zobacz PrimeFaces Guide lub mobile PrimeFaces Guide.

Jeśli jednak nie chcesz utworzyć kompletnego motywu, zostanie zastosowany motyw domyślny. Aby przesłonić style w zastosowanej kompozycji, musisz użyć !important. (Już to odkryłeś.)

Użytecznym narzędziem, którego używam jest FireBug. FireBug pokazuje, które reguły CSS są stosowane do elementu i które reguły są nadpisywane.

Źródło

2012-10-19 12:52:50 siebz0r

'! Important' w arkuszach stylów nie jest obowiązkowe. To zależy od sposobu ładowania arkuszy stylów. Jeśli twoje pojawią się przed PrimeFaces, to zostanie przesłonięte. Znaczenie '! Important' zapobiega temu.Ale to jest brzydkie rozwiązanie. Lepiej przestawić '' h: outputStylesheet> 'na' 'tak, aby było załadowane * po * PrimeFaces jeden. Specyficzny problem OP jest nieco inny. – BalusC

@BalusC IIRC PrimeFaces CSS jest zawsze ładowany przed stroną JSF. W związku z tym nie można zmienić kolejności arkuszy stylów. – siebz0r

To nie jest prawda. – BalusC

wszystkim, którzy ten problem, po prostu znaleźć rozwiązanie tego odrobina:

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

dodać primefaces dziedziczyć klasę do okna, a pojawi się on domyślnie.

Źródło

2014-12-02 21:38:46

Jak zrezygnować z przejrzystości okna dialogowego PrimeFaces?

Odpowiedz

Powiązane problemy