Welcome Guest Search | Active Topics | Sign In | Register

EO AJAX Uploader CSS and BrowseButton placement off. Options
Rocky
Posted: Wednesday, February 23, 2011 10:10:05 AM
Rank: Newbie
Groups: Member

Joined: 2/23/2011
Posts: 2
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;

}

eo_support
Posted: Wednesday, February 23, 2011 10:32:56 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
Hi,

You will need to adjust your CSS for that. The AJAXUploader literally takes your CSS and apply it to textbox and button area without any kind of adjustment. So the only way to adjust them is to adjust your CSS.

What's particular sensitive is your margin and padding settings. Margin frequently causes mis-alignment. Paddings are less likely to cause mis-alignment, however they affect the element's total width/height because in standard compliant mode width/height includes paddings. So you will want to remove those first.

Also try to use fixed width value instead of percentage width value. The textbox and button are placed inside a table cell, which themselves do not have fixed width. So a percentage value may not create a consistent result because different browser may interpret that situation differently.

You also want to style your browse button to about the same size or smaller than the default browse button. With AJAXUploader you can change how it looks, but you can not enlarge its size (the size of the area that responses mouse click).

Thanks
Rocky
Posted: Wednesday, February 23, 2011 10:37:16 AM
Rank: Newbie
Groups: Member

Joined: 2/23/2011
Posts: 2
Hi,

Thanks for the response, just figured that out as well. Was looking through firebug and turned the opacity up so I could see the controls.



I'll just position them over the top then. Thanks :)
eo_support
Posted: Wednesday, February 23, 2011 10:51:56 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,067
You are very welcome. Please feel free to let us know if there is anything else.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.