jsf - 怎么改变大小

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 也不例外。所以，没有办法改变Width输入文本框。如果您想了解更多信息和其他选项，请查看此答案：

我们可以改变 <input type="file"> 样式吗？

Answer 2

Primefacesp:fileUpload文本大小通过应用inputFieldstyleClass 增加。

样式.css

.inputField {
   width: 350px !important;
}

文件上传.xhtml

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

Answer 3

我做了一些测试，看看这是否可能。Primefaces 将简单的 fileUpload 翻译为：

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

这基本上是类型文件的标准浏览器输入字段，这意味着在 chrome、firefox 上，即……等它看起来都会有所不同。现在在我的语言环境中，这个框的标准尺寸是 238px，通过增加输入类型的宽度，我确实看到上传的框变大了，但遗憾的是文本框和按钮没有跟随。

如果您希望文件上传有所不同，我建议您查看文件上传的高级模式。您可以在 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;"/> 

输入框确实变大了。