This is a migrated thread and some comments may be shown as answers.

Telerik file upload control rendering issue

2 Answers 75 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 09 May 2014, 02:36 PM
I have a Telerik file upload control. it renders misaligned to the other items on the page. How can I get the control to render left aligned?

The markup looks like this:

            <table>
                <tr>
                    <td colspan="2">
                        <asp:Label ID="PleaseSelectAFileLabel" runat="server" Visible="false" Text="Please select a file." CssClass="ControlLabel"></asp:Label><br />
                        <asp:Label ID="PleaseSelectAFileType" runat="server" Visible="false" Text="Please select a file type." CssClass="ControlLabel"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="font-size:15px; font-weight:bold">File Type</div>
                    </td>
                    <td style="width: 296px" colspan="2">
                        <asp:DropDownList ID="EmployeeImportFormatDropDownList" AutoPostBack="true" runat="server" Width="200px" OnLoad="EmployeeImportFormatDropDownList_OnLoad"></asp:DropDownList>
                        <asp:LinkButton ID="EmployeeImportFormatDownloadLink" runat="server" Text="Download Template" OnClick="EmployeeImportFormatDownloadButton_OnClick" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="font-size:15px; font-weight:bold">File</div>
                    </td>
                    <td colspan="2">
                        <%--<asp:FileUpload ID="DataImportFileUpload" runat="server" Width="400px" EnableViewState="true"/><br />--%>
                        <telerik:RadAsyncUpload runat="server"  ID="DataImportsRadAsyncUpload" MultipleFileSelection="Disabled" MaxFileInputsCount="1" Width="375px" AllowedFileExtensions=".csv" />
                    </td>
                </tr>
                <tr valign="top">
                    <td width="75px"></td>
                    <td style="width: 296px">
                        <asp:Button ID="DataImportFileUploadImportButton" runat="server" Text="Import" OnClick="DataImportFileUploadImportButton_OnClick"/>&nbsp;&nbsp;<asp:Button ID="DataImportFileUploadCancelButton" runat="server" Text="Cancel" OnClick="DataImportUploadCancelButton_OnClick"/><br /><br />
                        <asp:LinkButton ID="DataImportMappingLink" runat="server" Text="Employee Data Import Mapping" PostBackUrl="../Company/ImportDataMapping.aspx"></asp:LinkButton>
                    </td>
                </tr>
            </table>

2 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 14 May 2014, 08:45 AM
Hi Tim,

This misalignment seems to be caused by your custom styles. Here is how the control is rendered at my side: http://screencast.com/t/nEE9muYen

Please provide a sample or link to your site.

Thanks.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tim
Top achievements
Rank 1
answered on 15 May 2014, 07:25 PM
I tracked it down.  The Telerik control uses an un-ordered list (ul) to create the green dot beside the uploaded file.  In the master page, there was a style setting ul's to a width of 25 pixels.
Tags
AsyncUpload
Asked by
Tim
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Tim
Top achievements
Rank 1
Share this question
or