CSS样式在JSF页面上很快闪烁和消失_Jsf_Primefaces

CSS样式在JSF页面上很快闪烁和消失

jsf primefaces

CSS样式在JSF页面上很快闪烁和消失,jsf,primefaces,Jsf,Primefaces,我在jsf文件上有primeface p:panel。我在模板页面（anasayfa.xhtml）上应用以下样式的背景色 .bos{背景色：红色；} 我的Jsf页面和ViewScope支持bean： <ui:composition template="/anasayfa.xhtml"> <ui:define name="ortaAlan"> ... <p:panel styleClass="bos"> ... </p:panel>

我在jsf文件上有primeface p:panel。我在模板页面（anasayfa.xhtml）上应用以下样式的背景色


.bos{背景色：红色；}

我的Jsf页面和ViewScope支持bean：

<ui:composition template="/anasayfa.xhtml">
    <ui:define name="ortaAlan">
...

<p:panel styleClass="bos">
...
</p:panel>


</ui:define>
</ui:composition>


...
...

当我加载页面时，很快就会看到背景色，然后变得透明。CTRL+F5具有相同的效果

这里怎么了？提前谢谢你的帮助

jsf页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/anasayfa.xhtml">
    <ui:define name="ortaAlan">
    <p:panel id="rezerveleriniz">
            <h:outputText value="#{rezervasyonBean.bugun.time}">
                <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText> : Rezervasyon Saatleri <br/>


    <ui:repeat var="r" value="#{rezervasyonBean.kullaniciRezervasyonSaatleri}">
    #{r.saatAraligi}<br/>
    </ui:repeat>

    </p:panel>

        <h:form id="aaa">


<p:panel>
<p:panel style="float:left;">
            <h:panelGrid columns="1">
            <ui:repeat var="rs" value="#{rezervasyonBean.rezervasyonSaatleriListesi}">

**// !!!!!!!!!!!! Problem is here !!!!!!!!**

                <p:panel styleClass="#{rezervasyonBean.isRezervasyonOnThisDay(rs) ? 'dolu' : 'bos' }">
                    #{rs.saatAraligi}
                    <h:commandButton action="#{rezervasyonBean.sec(rs,'1')}" value="+" update=":rezerveleriniz" disabled="#{rezervasyonBean.isRezervasyonOnThisDay(rs)}" />
                </p:panel>
            </ui:repeat>
            </h:panelGrid>

            <h:commandButton action="#{rezervasyonBean.kaydet()}" value="Kaydet" />
</p:panel>

<div style="clear:both;"></div>
</p:panel>
        </h:form>
    </ui:define>
</ui:composition>
</html>


：Rezervasyon Saatleri

#{r.saatAraligi}

**// !!!!!!!!!!!! 问题就在这里**
#{rs.saatAraligi}

模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>Görev Takip Sistemi</title>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 12px !important;
            font-family:Arial;
        }

.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}

        #topPanel {z-index:2 !important; }
        #topPanel div{overflow:visible;}

        .colStyle_panelGridForGorev{
            width:225px;
        }
        .colStyle_panelGridForProfil{
            width:100px;
        }
    </style>

</h:head>
<body>  


    <p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>

    <h:form>
        <p:idleMonitor timeout="900000">  
            <p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>  
        </p:idleMonitor>  
    </h:form>

    <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />  

    <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
            draggable="false" closable="false">  
        <p:graphicImage value="/images/statusBar.gif" />  
    </p:dialog> 

    <p:layout fullPage="true">

        <p:layoutUnit position="north" size="50"  id="topPanel" style="border:0px">
            <h:form id="formAnaSayfaToolbar">
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}" 
                            style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
                        <p:commandButton type="submit" value="Gruplarım" 
                            action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
                        <p:commandButton type="submit" value="Görevlerim" 
                            action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>

                        <p:commandButton type="submit" value="Kullanıcı İşlemleri" 
                            action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
                        <p:commandButton type="submit" value="Grup İşlemleri" 
                            action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>

                        <p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
                            <p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />  
                            <p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />  
                        </p:menuButton>

                        <p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}"> 
                            <p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />  
                            <p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />  
                        </p:menuButton>

                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">
                        <p:commandButton type="submit" value="Çıkış" icon="ui-icon-close" 
                            action="#{anasayfaBean.logout}" ajax="false"  style="margin-right:200px;"/>
                    </p:toolbarGroup>
                </p:toolbar> 
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <ui:insert name="ortaAlan">
                <h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
            </ui:insert>
        </p:layoutUnit>

        <p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
            <h:form style="text-align:center; font-size:13px;">
                <h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="east" size="200"  id="eastPanel" style="border:0px">
        </p:layoutUnit>
        <p:layoutUnit position="west" size="200"  id="westPanel" style="border:0px">
        </p:layoutUnit>

    </p:layout>

</body>
</html>


Görev Takip Sistemi
.ui小部件、.ui小部件.ui小部件{
字体大小：12px！重要；
字体系列：Arial；
}
博斯先生{
背景色：红色；
}
多鲁先生{
背景颜色：黄色；
}
#topPanel{z-index:2！重要；}
#topPanel div{溢出：可见；}
.colStyle_PanelGridforev{
宽度：225px；
}
.colStyle_panelGridForProfil{
宽度：100px；
}

这真的是再现问题所需的最少代码吗？当我将目前提供的代码复制粘贴到空的基本模板中时，我无法重现您的问题。您的页面中有自定义JS代码吗？只有primefaces JS库。我发布了完整的模板和jsf页面，好像我回答了我自己的问题，因为评论区域是有限的。你试过查看呈现的HTML吗？p:panel有

ui面板ui小部件ui小部件内容ui小部件内容ui角落所有要开始的类<代码>ui小部件内容

包含背景颜色信息，可能会覆盖您的实现。检查一下，我已经检查过了。面板的Html源代码是

，而computed stype面板的背景色是我所期望的黄色。但黄色背景只在页面加载时应用了很短的时间。我无法复制它。您尝试了哪些浏览器？顺便说一句，代码片段不是完全可以复制粘贴运行的。bean丢失了，ui:repeat仍然是空的，等等。我必须将bean存根以保持一些EL表达式。请拿出尽可能小但完整的复制'n'paste'n'runnable Facelets文件来演示确切的问题。如果备份bean不是重现问题所必需的，那么只需省略它，但是请删除/修复EL表达式，这样它就可以真正复制、粘贴、运行，而无需任何更改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>Görev Takip Sistemi</title>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 12px !important;
            font-family:Arial;
        }

.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}

        #topPanel {z-index:2 !important; }
        #topPanel div{overflow:visible;}

        .colStyle_panelGridForGorev{
            width:225px;
        }
        .colStyle_panelGridForProfil{
            width:100px;
        }
    </style>

</h:head>
<body>  


    <p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>

    <h:form>
        <p:idleMonitor timeout="900000">  
            <p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>  
        </p:idleMonitor>  
    </h:form>

    <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />  

    <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
            draggable="false" closable="false">  
        <p:graphicImage value="/images/statusBar.gif" />  
    </p:dialog> 

    <p:layout fullPage="true">

        <p:layoutUnit position="north" size="50"  id="topPanel" style="border:0px">
            <h:form id="formAnaSayfaToolbar">
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}" 
                            style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
                        <p:commandButton type="submit" value="Gruplarım" 
                            action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
                        <p:commandButton type="submit" value="Görevlerim" 
                            action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>

                        <p:commandButton type="submit" value="Kullanıcı İşlemleri" 
                            action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
                        <p:commandButton type="submit" value="Grup İşlemleri" 
                            action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>

                        <p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
                            <p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />  
                            <p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />  
                        </p:menuButton>

                        <p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}"> 
                            <p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />  
                            <p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />  
                        </p:menuButton>

                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">
                        <p:commandButton type="submit" value="Çıkış" icon="ui-icon-close" 
                            action="#{anasayfaBean.logout}" ajax="false"  style="margin-right:200px;"/>
                    </p:toolbarGroup>
                </p:toolbar> 
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <ui:insert name="ortaAlan">
                <h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
            </ui:insert>
        </p:layoutUnit>

        <p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
            <h:form style="text-align:center; font-size:13px;">
                <h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="east" size="200"  id="eastPanel" style="border:0px">
        </p:layoutUnit>
        <p:layoutUnit position="west" size="200"  id="westPanel" style="border:0px">
        </p:layoutUnit>

    </p:layout>

</body>
</html>