Welcome Guest Search | Active Topics | Sign In | Register

AJAXUploader in dialog form does not display correctly Options
AmitM
Posted: Sunday, September 27, 2009 4:53:57 AM
Rank: Member
Groups: Member

Joined: 9/27/2009
Posts: 10
It looks like the AJAXUploader does not render properly (browse button is behind the textbox) in a popup dialog form. Looking at the source that is generated, I am guessing it has something to do with the z-index being set in the upload control.

Here is the ASP:

Code: Visual Basic.NET
<table border="0" cellpadding="0" cellspacing="0" class="layouttable" style="width: 100%">
    <tr>
        <td style="width:5%"></td>
        <td style="width:90%">
           <table border="0" cellpadding="0" cellspacing="0" class="layouttable" style="width: 100%">
               <tr>
                    <td style="width:100%">
                        <asp:Label ID="lblTo" runat="server" Text="To:"></asp:Label><br />
                        <asp:TextBox ID="To" runat="server" Width="100%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="width:100%">
                        <asp:Label ID="Label2" runat="server" Text="Subject:"></asp:Label><br />
                        <asp:TextBox ID="Subject" runat="server" Width="100%"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="width:100%">
                        <eo:ColorPicker ID="ColorPicker1" runat="server" Height="20px" Width="30px">
                        </eo:ColorPicker>
                        <eo:Editor ID="Editor1" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Height="320px" HighlightColor="255, 255, 192" Width="100%" ColorPickerID="ColorPicker1">
                            <FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
                            <BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma" />
                            <EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                            <BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;" />
                            <HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px" />
                            <BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px" />
                            <EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
                            <BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma" />
                            <BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
                            <TabButtonStyles>
                                <NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white" />
                                <HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5" />
                                <SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white" />
                            </TabButtonStyles>
                            <EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid" />
                        </eo:Editor>
                     </td>
                </tr>
               <tr>
                   <td style="width:100%; text-align: right">
                       <div onclick="eo_CancelBubble(event)">
                            <eo:AJAXUploader ID="AJAXUploader1" runat="server" Width="100%" EnableTheming="false"  MaxDataSize="30000" ProgressBarSkin="Windows_Vista" TempFileLocation="C:\temp\">
                            </eo:AJAXUploader>
                       </div>
                   </td>
               </tr>
               <tr>
                   <td style="width:100%; text-align: right">
                       <br />
                       <asp:Button ID="btnSend" runat="server" Text="Send" /><asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                   </td>
               </tr>
           </table>
        </td>
        <td style="width:5%"></td>
    </tr>
</table>


That is in a custom control. That control is in a page. That page is referenced in the ContentUrl property of an EO.Dialog control.

If I go to the page directly, it renders fine. If I use the normal AJAX modal popup, it renders fine.

Any suggestions? Can I use a different browse button or hide the text box?

Thanks,
Amit
AmitM
Posted: Sunday, September 27, 2009 5:13:14 PM
Rank: Member
Groups: Member

Joined: 9/27/2009
Posts: 10
I found the answer to this in another post (finally) and it was:
"Please remove ShadowDialog and ShadowDepth on the dialog. Shadow does not work well with uploader. Once you remove that the uploader should work fine."

So the uploader renders fine now but the color picker (in the editor) is transparent. Has anyone had the same experience?

Thanks,
Amit
eo_support
Posted: Monday, September 28, 2009 8:56:34 AM
Rank: Administration
Groups: Administration

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

That's because you didn't set the ColorPicker's PopupStyle. Try to copy the ColorPicker from any of our sample (for example Demos/Editor/Designs/Office 2003/Demo.ascx) and you should have all the styles.

Thanks!


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.