Upload component -> button: 100%


Can anybody tell me how to maximize the width of the button (to choose the file) inside the Upload component?
What should i put in the styles.css file or is it possible in another way?
I tried to put .v-upload { width : 100% !important } in my styles.css, but that did not work…

Kind regards,
Jan De Beule


The Upload component in Vaadin uses the standard HTML upload input element with no tweaking. The HTML upload element is very difficult to style, probably because of security reasons. There are
some tricks
to style the upload element, but they are not supported in the Upload component in Vaadin. In any case, you can’t change the width of the element, as it’s fixed.

Notice that the v-upload element is the entire Upload component, which also has the “Start Upload” button. The native upload element has style gwt-FileUpload, as you can see easily with Firebug. The “Start Upload” button can be styled with “.v-upload .v-button” selector.

<form class="v-upload">
    <input type="hidden">
    <input type="file" class="gwt-FileUpload" name="PID15_file" style="width: 300px ! important; opacity: 0.5;">
    <div tabindex="0" class="v-button" role="button">
        <span class="v-button-wrap"><span class="v-button-caption">Start Upload</span></span>