style of FileUpload widget
Mathieu
I have to develop an application with GWT technology. I use UI Binder
to develop the view of the application. I work with eclipse IDE.
I want to apply my own style (image up and down) to every button of my
application. Here comes the problem, I can't succeed in doing that.
I try to display a FileUpload widget with a particular style. I want
to change the background image of the browse button. I use this
component in form panel to submit to a servlet (with post method).
I already tried different methods to do this :
mainly I try the method explained in several posts which consists in
hidding the fileupload component and redirect events from others
components (for instance a textbox and a button). But the method
doesn't work on Firefox because it blocks javascript call of method
click. (?)
So, if someone knows how to restyle the fileupload component with a
clean method
thanks
Mathieu
I have to develop an application with GWT and UI Binder in Eclipse. I
have to apply the Model View Presenter technic.
I want to apply a special style to all the buttons of my application.
Here comes the problem, I can't do that with the fileupload component.
I tried different way to restyle the component (for instance just
CSS), but there is nothing to do, I can't change its style.
I also tried the method describe in several post that consists in
hidding the fileupload component in the page, and redirect the events
of other widget to our fileupload component. But this method doesn't
work in firefox because the calls to javascript click method are
blocked.
So, if someone has a solution to cleanly resolv this problem ...
thanks
Luis Fernando Planella Gonzalez
Inputs of type file cannot be styled using normal CSS.
This has been an issue for years, and I don't know if it will ever
have a standard solution.
However, there are some obscure techniques, like this one:
http://www.quirksmode.org/dom/inputfile.html
Mathieu
I already did this technique but the fact is my browse button has 2
different styles switched when the mouse is over it. So with this
technique, the over mouseevent can't be use with the browse button
which is under the fileupload widget even if it's invisible :/
Maybe someone will have an idea to figure it out with this solution or
another, but anyway, thanks for your time, I appreciate.
Mathieu
Luis Fernando Planella Gonzalez
the GWT code.
However, here is the HTML sketch I reproduced in GWT with widgets:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
.uploadContainer {
bottom: 0px;
overflow: hidden;
position: absolute;
right: 0px;
top: 0px;
left: 0px;
}
.upload {
filter:alpha(opacity: 0);
opacity: 0;
z-index: 1;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
cursor: pointer;
cursor: hand;
}
-->
</style>
</head>
<body>
<form>
<table cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<div style="position:relative">
<button class="uploadButton" type="button"
id="uploadButton">ABCDE</button>
<div class="uploadContainer">
<input type="file" class="upload"
onchange="getElementById('selectedFile').innerHTML = this.value"/>
</div>
</div>
</td>
<td id="selectedFile"></td>
</tr>
</table>
</form>
</body>
</html>
Manuel Carrasco Moñino
the ability to hidde the original fileinput rendered by the browser
and show a customizable button or clickable widget.
Manolo
> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>
>