Question

我正在使用<p:fileUpload>标记来处理文件上传功能。但我需要更改我无法更改的文本框大小。

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

我尝试在CSS中设置宽度，但它没有任何效果。

Answer 1

我做了一些测试，看看这是否可行。 Primefaces将简单的fileUpload转换为：

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

这基本上是类型文件的标准浏览器输入字段，意思是在chrome，firefox上，即...它们看起来都不同。现在在我的语言环境中，此框的标准大小为238px，并且通过增加输入类型的宽度，我确实看到上传周围的框变得更大，但遗憾的是文本框和按钮不会跟随。

如果您希望fileupload不同，我建议您查看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;"/>

输入框确实变大了。

Answer 2

这是文件上传功能很长时间的一大限制.Primefaces FileUpload也不是这种情况的例外。因此，无法更改输入文本框的Width。如果您想要更多信息和其他选项，请检查此anwser：

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

Answer 3

通过应用p:fileUpload styleClass

，

Primefaces inputField文字大小增加

<强>的style.css

.inputField {
   width: 350px !important;
}

<强> fileUpload.xhtml

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

如何更改<p：fileupload> </p：fileupload>的大小

3 个答案: