[英]Style Primefaces fileupload button
我正在尝试将Primefaces fileUpload控件样式化,使其看起来像常规的命令按钮。 正如您在屏幕快照中看到的那样,我已经很近了,但是我无法获得标有“ Load”的按钮与其他按钮对齐。 我用红色箭头标记了我的屏幕截图,该箭头显示该按钮需要向上移动几个像素。
这是我的CSS和xhtml,这使我明白了这一点。 我尝试了各种偏差,但没有运气。
.ui-fileupload-buttonbar {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
border: 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;
}
<p:toolbar>
<f:facet name="left">
<p:commandButton ajax="false" value="Save" icon="ui-icon-disk">
<p:fileDownload value="#{calculator.file}" />
</p:commandButton>
<p:fileUpload fileUploadListener="#{calculator.handleFileUpload}"
label="Load" mode="advanced" update="@all" auto="true"
sizeLimit="100000" allowTypes="/(\.|\/)(txt)$/" />
<p:commandButton ajax="false" value="MS Word"
icon="ui-icon-document" action="#{calculator.Poi()}" />
etc...
答案更简单...
.ui-fileupload-buttonbar .ui-button {
top: -1px;
}
在许多情况下,上面的答案是相关的 (在这里...应避免!important,可以通过应用更特定的css选择器来完成)
使CSS选择器比现在实际应用样式的选择器更具体。 例如,向按钮添加一个id属性,并在选择器中使用该属性(与您已有的类结合使用,使其更加具体 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.