Hi there,
Came across your framework today, wish I had 2 weeks ago, would have saved me some time! Anyways, I've started to implement the AJAX FileUploader, it all works fine except for when I'm trying to style it.
The problem is with the "Input box placeholder" - after applying a CSS theme to the BrowseButtonStyle and TextBoxStyle, the alignment with the button and the trigger is off.
Hopefully this image will help explain:
As you can see, it looks like the CSS has masked the controls correctly, but the controls have stayed in the same place. Green being clickable areas, red meaning dead zone! Although the buttonpress still responds. (Button appears to be pressed, nothing happens)
I'm using ASP.net 2.0 - latest EO build from the site today. I think this is an issue with EO not .net.
Thanks for your help!
Rocky.
ASP
Quote:<eo:AJAXUploader ID="uploader" runat="server">
<LayoutTemplate>
<table>
<tbody>
<tr>
<td style="height: 25px">
<asp:PlaceHolder ID="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
</td>
</tr>
<tr>
<td>
<asp:Button ID="UploadButton" runat="server" CssClass="grayButtonCustom" Text="Upload">
</asp:Button>
</td>
</tr>
<tr>
<td>
<eo:ProgressBar ID="ProgressBar" runat="server" ControlSkinID="Windows_XP">
</eo:ProgressBar>
</td>
</tr>
<tr>
<td>
<asp:PlaceHolder ID="ProgressTextPlaceHolder" runat="server">Progress Text Place Holder
</asp:PlaceHolder>
</td>
</tr>
<tr>
<td>
<asp:Button ID="CancelButton" runat="server" CssClass="grayButtonCustom" Text="Cancel">
</asp:Button>
</td>
</tr>
<tr>
<td>
<asp:PlaceHolder ID="PostedFilesPlaceHolder" runat="server">Posted Files Place Holder
</asp:PlaceHolder>
</td>
</tr>
<tr>
<td>
<asp:Button ID="DeleteButton" runat="server" CssClass="grayButtonCustom" Text="Delete Selected Files">
</asp:Button>
</td>
</tr>
</tbody>
</table>
</LayoutTemplate>
<BrowseButtonStyle CssClass="grayButtonCustomBrowse" />
<TextBoxStyle CssClass="textbox" />
</eo:AJAXUploader>
CSS
Quote:.grayButtonCustomBrowse
{
width:auto;
color: #000000;
margin-left:10px;
font-family: verdana;
font-size: 100%;
background: url(../images/bg_btn_gray.gif) repeat-x top;
border: solid 1px #e2e2e2;
padding:0 5px 0 5px;
height:20px;
}
.textbox
{
background-image:url(../images/bg_textbox.jpg);
background-repeat:repeat-x;
border: solid 1px #C4C4C4;
width: 98%;
color:#333333;
padding:3px;
margin-right:4px;
margin-bottom:8px;
font-family:tahoma, arial, sans-serif;
height: 20px;
}