如何編輯<rich：fileUpload> CSS？

我想只顯示按鈕add和下面的按鈕上傳圖片，但沒關係我在我的CSS做，通過richfaces生成的表始終是相同的：如何編輯<rich：fileUpload> CSS？

這是我的形成使用richfaces：

<ui:define name="content"> 
     <h:form> 
      <h:panelGrid> 
       <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp" ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" > 
        <a4j:ajax event="uploadcomplete" execute="@none" render="info" /> 
       </rich:fileUpload> 

       <h:panelGroup id="info"> 
        <h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" /> 
        <rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row"> 
         <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" /> 
        </rich:dataGrid> 

        <br /> 
        <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" /> 
       </h:panelGroup> 
      </h:panelGrid> 
     </h:form> 
    </ui:define>

這是如何產生：

form

我想要的東西更簡單因爲在另一個時刻我會插入一些jQuery slider插件。但是我不能用richfaces生成的這張表消失。是的皮膚是disable in my richfaces configuration：

更新繼建議我的CSS看看現在這個樣子：

<style> 
    div div.rf-fu { border: 0px; width: 85px; } 
    div div.rf-fu-hdr { border: 0px; } 
    span span.rf-fu-btn-clr { border: 0px; } 
    span.rf-fu-btns-lft{ width: 85px; } 
    span.rf-fu-btns-rgh{ display: none; } 
    div div.rf-fu-lst { display:none; } 
    </style>

現在我add..文件按鈕看起來像：

enter image description here

這些帖子也非常有用：

Should I use 'border: none' or 'border: 0'?
Inner div has borders - how to override with a class on an outer div?

來源

2013-04-17 Valter Silva

您是否嘗試使用爲richfaces元素生成的類重寫richfaces css？ – dShringi

我試過了，但是我僞造了'！important'屬性 –

使用'！important'是一個不好的習慣，應該始終被認爲是最後的手段！請參閱：http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – dShringi

您可以使用阿德里安的回答覆蓋RichFaces的CSS你卻不需要使用!important覆蓋RichFaces的CSS。只需使用selector specificity覆蓋由richfaces應用的CSS。

對於案件實例，其中使用的是important，應用CSS爲：

div div.rf-fu-lst { display:none }，它會爲你工作。

來源

2013-04-17 12:17:48 dShringi

我已經解決了你的建議我的答案。非常感謝你！ –

不客氣。 – dShringi

@dShringi，謝謝你的回答！非常有幫助！ –

目前，我正在做這爲我的項目。你必須CSS覆蓋RichFaces的在樣式表是這樣的：

.rf-fu, .rf-fu-hdr { 
    float: left; 
    width: auto; 
    border: none; 
    background: none; 
    padding: 0; 
    margin: 0; 
} 

.rf-fu-btn-cnt-add { 
    paddin-left: 0; 
    cursor: pointer; 
} 

.rf-fu-btn-add { 
    margin: 0; 
} 

.rf-fu-btns-rgh, .rf-fu-lst { 
    display: none; 
} 

.rf-fu-btns-lft { 
    width: 100%; 
}

來源

2013-04-17 09:32:05

如何編輯<rich：fileUpload> CSS？

回答

相關問題