Design of RadUpload and RadProgressArea messed up..

[shadow]

Design of rad upload and progress area is messed up after partial page load.

Below is the page markup.

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
<div id="ImageGallery_MainDiv">
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" EnableSkinTransparency="true" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" HorizontalAlign="NotSet" LoadingPanelID="LoadingPanel" Width="672px"
        Height="610px" ClientEvents-OnResponseEnd="mb_ManageBase_ImageGallery_SetInterface">
        <asp:HiddenField ID="hfGalleryID" runat="server" Value="0" />
        <asp:HiddenField ID="hfContentItemID" runat="server" Value="0" />
        <ModuleControls:MessageNotification ID="Notification" runat="server" MessageMode="Success">
        </ModuleControls:MessageNotification>
        <%----%>
        <ModuleControls:ConfigurationDockLayout ID="RadDockLayout1" runat="server">
            <ModuleControls:ConfigurationDockZone ID="RadDockZone1" runat="server">
                <telerik:RadDock ID="GalleryEditConfigurationArea" runat="server" Title="ManageBase Gallery" DockMode="Docked" Collapsed="True"
                    DefaultCommands="ExpandCollapse" EnableRoundedCorners="true" EnableAnimation="True" Index="0" Tag="" EnableDrag="false">
                    <Commands>
                        <telerik:DockExpandCollapseCommand />
                        <telerik:DockToggleCommand AutoPostBack="true" CssClass="RadDockCustomSaveCommand" AlternateCssClass="RadDockCustomSaveCommandHover"
                            Name="CommandSaveGallery" />
                        <telerik:DockToggleCommand AutoPostBack="true" CssClass="RadDockCustominfoCommand" AlternateCssClass="RadDockCustomInfoCommandHover"
                            Name="Info" />
                    </Commands>
                    <ContentTemplate>
                        <table border="0" cellpadding="2" cellspacing="6" width="98%">
                            <tr>
                                <td>
                                    <asp:Label ID="ltrSelectGallery" runat="server" Text="Administrera"></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="ltrGalleryName" runat="server" Text="Gallery-namn"></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="ltrGallerystill" runat="server" Text="Gallery still"></asp:Label>
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <GalleryControl:ImageGalleryDropDown ID="ddlImageGallerys" runat="server" EmptyMessage="Välj Galleri" AutoPostBack="True"
                                        Font-Names="Arial" ForeColor="#666666" Font-Size="14px" Width="180px">
                                    </GalleryControl:ImageGalleryDropDown>
                                </td>
                                <td>
                                    <telerik:RadTextBox runat="server" ID="txtGalleryName" Columns="23" Skin="Default" Font-Names="Arial" ForeColor="#666666"
                                        Font-Size="14px" Width="180px">
                                    </telerik:RadTextBox>
                                </td>
                                <td>
                                    <GalleryControl:GelleryViewTypeDropDown ID="ddlGalleryPreviewType" runat="server" EmptyMessage="Välj still" AutoPostBack="True"
                                        Font-Names="Arial" ForeColor="#666666" Font-Size="14px" Width="180px">
                                    </GalleryControl:GelleryViewTypeDropDown>
                                </td>
                                <td>
                                    <telerik:RadButton ID="btnUpdateGallery" CssClass="ImageGallery_glUpdateGalleryStrip" Text="" runat="server">
                                        <Image EnableImageButton="true" IsBackgroundImage="true" />
                                    </telerik:RadButton>
                                </td>
                                <td>
                                    <telerik:RadButton ID="btnDeleteGallery" runat="server" CssClass="ImageGallery_glDelete" HoveredCssClass="ImageGallery_glDeleteHover"
                                        Text="">
                                        <Image EnableImageButton="true" IsBackgroundImage="true" />
                                    </telerik:RadButton>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                                <td colspan="3" align="right">
                                    <telerik:RadButton ID="btnSaveGallery" runat="server" Text="Spara som nytt Galleri">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </ContentTemplate>
                </telerik:RadDock>
            </ModuleControls:ConfigurationDockZone>
        </ModuleControls:ConfigurationDockLayout>
        <div style="margin-top: 18px;">
            <asp:Panel ID="pnlDisplayGalleryConfiguration" runat="server">
                <table border="0" cellpadding="2" cellspacing="6">
                    <tr>
                        <td>
                            <telerik:RadComboBox ID="ddlThunmnailSize" runat="server" AutoPostBack="true" Font-Names="Arial" ForeColor="#666666" Font-Size="14px"
                                Width="180px">
                                <Items>
                                    <telerik:RadComboBoxItem Text="100 X 60" Value="100-60" Selected="true" />
                                    <telerik:RadComboBoxItem Text="110 X 70" Value="110-70" />
                                    <telerik:RadComboBoxItem Text="120 X 80" Value="120-80" />
                                    <telerik:RadComboBoxItem Text="140 X 90" Value="140-90" />
                                    <telerik:RadComboBoxItem Text="170 X 120" Value="170-120" />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                        <td>
                            <telerik:RadComboBox ID="ddlBorder" runat="server" EmptyMessage="Välj inramning" AutoPostBack="True" Font-Names="Arial" ForeColor="#666666"
                                Font-Size="14px" Width="180px">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Raka hörn utan skugga" Value="CornerSimple" />
                                    <telerik:RadComboBoxItem Text="Raka hörn med skugga" Value="CornerShadow" />
                                    <telerik:RadComboBoxItem Text="Runda hörn utan skugga" Value="RoundedSimple" />
                                    <telerik:RadComboBoxItem Text="Runda hörn med skugga" Value="RoundedShadow " />
                                </Items>
                            </telerik:RadComboBox>
                        </td>
                        <td>
                            <telerik:RadComboBox ID="ddlEffect" runat="server" EmptyMessage="Välj effekt" Font-Names="Arial" ForeColor="#666666" Font-Size="14px"
                                Width="180px">
                            </telerik:RadComboBox>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: middle">
                            <asp:Label ID="ltrImageWidth" runat="server" Text="Visning bredd pixl"></asp:Label>
                            <asp:TextBox runat="server" ID="txtImagePixelSize" Text="1000" Enabled="false" Font-Names="Arial" Width="40px" ForeColor="#666666"
                                Font-Size="14px">
                            </asp:TextBox>
                        </td>
                        <td valign="middle">
                            <telerik:RadButton ID="btnOpenUploadWindow" runat="server" Text="Ladda upp bilder">
                            </telerik:RadButton>
                        </td>
                        <td valign="middle">
                        </td>
                        <td valign="middle">

                        </td>
                        <td valign="middle">
                        </td>
                    </tr>
                </table>
                <asp:PlaceHolder ID="phGalleryView" runat="server"></asp:PlaceHolder>
                <uc1:GalleryViewSimple ID="GalleryViewSimple1" runat="server" Visible="true" />
            </asp:Panel>
            <asp:Panel ID="pnlUploadImages" runat="server" Visible="false">
                <div style="text-align: right; margin-right: 20px;">
                    <telerik:RadButton ID="btnBackFromUpload" runat="server" Text="Tillbaka">
                    </telerik:RadButton>
                </div>
                <telerik:RadProgressManager runat="server" ID="RadProgressManager1" Skin="Transparent" />
                <telerik:RadAsyncUpload ID="upImages" runat="server" MaxFileSize="10485760" MultipleFileSelection="Automatic" AllowedFileExtensions=".jpg,.png,.jpeg,.bmp,.gif"
                    PostbackTriggers="btnUploadToServer" OnClientFilesUploaded="onClientFileUploaded" OnClientValidationFailed="onValidationFailed"
                    Skin="Transparent" Width="300px">
                    <Localization Cancel="Avbyrt" Remove="Ta bort" Select="Välj bilder" />
                </telerik:RadAsyncUpload>
                <telerik:RadButton ID="btnUploadToServer" runat="server" Text="Ladda upp till Galleriet" Enabled="false" AutoPostBack="false"
                    OnClientClicked="updatePictureAndInfo">
                </telerik:RadButton>
                <telerik:RadProgressArea runat="server" ID="RadProgressArea1" Skin="Transparent" Width="100%">
                </telerik:RadProgressArea>
                <telerik:RadNotification ID="RadNotification1" runat="server" Skin="Transparent" EnableRoundedCorners="true" EnableViewState="false"
                    EnableShadow="true" ShowTitleMenu="false" Position="Center" Width="300" Height="100">
                </telerik:RadNotification>
            </asp:Panel>
        </div>
    </telerik:RadAjaxPanel>
</div>

 I have also attached the image to show the messed page .

[Kate]

Hello Farid,

From the image that you provided it seems that the styles for the RadAsyncUpload don not get applied. Unfortunately using the code that you provided I am not able to replicate the issue locally and help you out. However, I would suggest that you check if there are any errors on the page indicating the issue.

Regards,
Kate
the Telerik team

[shadow]

Hello Kate,

I have checked there are no errors on the page. My assumption is that upload control is not getting the designed in ajax panel.

I am creating a support ticket with the complete code.