Style p:fileUpload button size

Question

I want to make the PrimeFaces fileload button smaller than the default, and I want to adjust the positions of the buttons. This is the xhtml file.

    <?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"?

It will help `css` guys if you also post generated HTML code. — Geinmachi, Feb 12 '16 at 20:04
Is this the button you’re referring to? http://www.primefaces.org/showcase/ui/file/upload/basic.xhtml — Ted Whitehead, Feb 12 '16 at 20:06
Read http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles and learn from it. These questions are basically totally NOT PrimeFaces (jsf) related but plain css. Learn css! — Kukeltje, Feb 14 '16 at 09:21

Jens Piegsa · Accepted Answer · 2016-02-12T22:53:07.310

Proposal

I used the following 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; does
the large padding comes from .ui-button-text-icon-left .ui-button-text, so we override that
a general rule of thumb: try to avoid !important but find a more specific css selector instead
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

The result

This doesn't look good on my computer. big buttons and the box is too long. — ling, Feb 12 '16 at 20:35
margin-right:10em: How can I make the distance between "choose" and "upload" 10em, but still keep "upload" and "cancel" together? — ling, Feb 12 '16 at 20:57

Ted Whitehead · Answer 2 · 2016-02-12T20:49:54.093

1

I’m assuming this is the button you’re referring to: 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;
}

edited Feb 12 '16 at 20:49

answered Feb 12 '16 at 20:10

Ted Whitehead

1,731
10
18

How can I get rid of the outer layer big box which encloses the "choose", "upload" and "cancel" button? – ling Feb 12 '16 at 20:26
Also, can I adjust the distance between "choose" and "upload"? I don't want "choose" to stay too close to "upload". – ling Feb 12 '16 at 20:30
@ling I would need to see your markup to help with that. Can you post it in the question? – Ted Whitehead Feb 12 '16 at 20:37
Please see the new button and full html. – ling Feb 12 '16 at 20:54
@Ling: css is applied to the generated client side html, NOT the jsf server side xhtml. So with css problems post the former – Kukeltje Feb 14 '16 at 09:09

Style p:fileUpload button size

2 Answers2