[英]Style p:fileUpload button size
I want to make the PrimeFaces fileload button smaller than the default, and I want to adjust the positions of the buttons. 我想使PrimeFaces文件加载按钮比默认按钮小,并且我想调整按钮的位置。 This is the xhtml file. 这是xhtml文件。
<?xml version='1.0' encoding='UTF-8' ?>
<!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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title></title>
<style>
.ui-fileupload-buttonbar .ui-icon {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
border: none;
visibility: hidden !important;
}
.ui-button-text-icon-left .ui-button-text {
font-size: 0.5em;
color: #339966;
}
/* Icon */
.ui-button-text-icon-left .ui-icon {
display: none;
}
.ui-fileupload {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
display: inline-block;
border: none;
}
.ui-fileupload-content {
display: none;
}
</style>
</h:head>
<h:body>
<h:form>
<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}"
mode="advance" dragDropSupport="false" multiple="true"
update="messages" sizeLimit="100000" fileLimit="3"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</h:body>
</html>
My current button is attached. 我当前的按钮已附加。 How to get rid of the outer layer of the box? 如何摆脱盒子的外层? And how to adjust the distance between "choose" and "upload"? 以及如何调整“选择”和“上载”之间的距离?
Proposal 提案
I used the following css: 我使用了以下CSS:
/* hide the icons in the file upload button bar */
.ui-fileupload-buttonbar .ui-icon {
display: none;
}
/* adjust the padding of all buttons inside the file upload button bar */
.ui-fileupload-buttonbar .ui-button-text-icon-left .ui-button-text {
font-size: 0.8em;
padding: 0 0.2em;
}
/* unstyle the file upload button bar background */
.ui-fileupload-buttonbar.ui-widget-header {
background-color: transparent;
border: 0 none;
}
/* increase fileupload button spacing between 'choose' and 'upload' */
.ui-fileupload-buttonbar .ui-fileupload-choose {
margin-right: 10em;
}
/* remove the border of file upload content list */
.ui-fileupload-content {
border: 0 none;
}
Explanations 说明
visibility:hidden;
does not remove the covered space, display:none;
不删除覆盖的空间, display:none;
does 确实
the large padding comes from .ui-button-text-icon-left .ui-button-text
, so we override that 大的填充来自.ui-button-text-icon-left .ui-button-text
,因此我们将其覆盖
a general rule of thumb: try to avoid !important
but find a more specific css selector instead 一般经验法则:尽量避免!important
而是找到更具体的CSS选择器
browsers like Firefox and Chrome let you inspect the source code of your page by pressing F12 and provide a live preview of any changes made to either html or css content Firefox和Chrome等浏览器可让您按F12来检查页面的源代码,并实时预览对html或css内容所做的任何更改
The result 结果
I'm assuming this is the button you're referring to: http://www.primefaces.org/showcase/ui/file/upload/basic.xhtml 我假设这是您指的按钮: http : //www.primefaces.org/showcase/ui/file/upload/basic.xhtml
If so, then your options are limited to making the font smaller, reducing the padding, and/or removing the icon. 如果是这样,则您的选择仅限于缩小字体,减少填充和/或删除图标。
For example: 例如:
/* Button */
.ui-button-text-icon-left .ui-button-text {
font-size: 0.8em;
padding: 0.2em;
}
/* Icon */
.ui-button-text-icon-left .ui-icon {
display: none;
}
Regarding your additional questions in the comments, you can remove the containing styles with this: 关于注释中的其他问题,您可以使用以下方法删除包含的样式:
.ui-fileupload-buttonbar {
background: none;
border: 0;
padding: 0;
}
You can add some margin after the "choose" button with this: 您可以在“选择”按钮之后添加一些边距:
.ui-fileupload-choose.ui-button {
margin-right: 40px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.