2013-03-07 50 views
0

我正在使用<p:fileUpload>標記進行文件上傳功能。但我需要更改文本框大小,我無法。如何更改<p:fileUpload>的大小

<h:outputLabel id="attachment_label" value="Add Attachment(s)" styleClass="atf-label" />   
<p:fileUpload value="" mode="simple" style="width:350px"/> 

我試圖在CSS中設置寬度,但它沒有任何效果。

+0

我想這是不可能的,因爲簡單的文件上傳使用標準的瀏覽器輸入文件中的字段。我認爲如果你想讓它看起來不同,那麼你應該使用高級模式。 – Lyrion 2013-03-07 14:11:37

回答

0

我已經做了一些測試,看看這是否可能。 Primefaces翻譯簡單的文件上傳爲:

<input type="file" id="fileUploadForm:j_idt90" name="fileUploadForm:j_idt90" style=""> 

這是basicly類型文件的標準瀏覽器輸入框,在Chrome,火狐,即意味着... ECT它都另眼相看。現在在我的語言環境中,此框的標準大小爲238像素,並且通過增加輸入類型的寬度,我確實看到圍繞上傳的框越來越大,但遺憾的是文本框和按鈕沒有遵循。

如果你想fileupload是不同的,我會建議尋找文件上傳的高級模式。您可以在工作中看到它的primefaces展示:http://www.primefaces.org/showcase/ui/fileUploadSingle.jsf

編輯:我忘了測試它在IE8(只有IE8在此計算機上)。在Chrome中的文本是一個輸出的文本,在Firefox它是在不能種植大的inputText字段,但在IE8如果我添加寬度:

<p:fileUpload value="#{fileUploadBean.file}" mode="simple" style="width:500px;"/> 

的輸入框也變得越來越大。

0

這是長時間文件上傳功能的一大侷限.Primefaces FileUpload並不是這種情況下的例外。因此,無法更改輸入文本框的Width。如果您想了解更多信息和其他選項檢查這個anwser:

Can we change <input type="file"> style?

0

Primefaces p:fileUpload文字的大小增加了應用inputField的styleClass。

的style.css

.inputField { 
    width: 350px !important; 
} 

fileUpload.xhtml

<p:fileUpload id="imageId" mode="simple" styleClass="inputField"></p:fileUpload>