Fix spacing

[Kurt Kluth]

I would like to fix the spacing in between my AsyncUpload and the previous object.  I tried adding it to a table and doesn't seem to matter.  From the code you can see that I have set "HideFileInput" to true.  I am just wanting the "Select" button.

Attached is two images.  If I put the AsyncUpload in the same cell it goes under the RadTextBox and I don't want that as I would like it next to.  If they are in different cells then the spacing is too far apart.  How do get them closer w/o throwing it under the RadTexBox.

 

    <tr>
        <td class="LabelStyle-Right" style="vertical-align: top;">Subject:</td>
        <td style="vertical-align: top;">
            <telerik:RadTextBox ID="_subject" runat="server" MaxLength="100" Width="200"></telerik:RadTextBox>
            </td>
        <td style="vertical-align: top; text-align: left;">
            <telerik:RadAsyncUpload ID="_FaxFile" runat="server" Width="100%"
                AllowedFileExtensions=".pdf" MaxFileInputsCount="1" Visible="true" ToolTip="Select PDF" HideFileInput="true" MaxFileSize="15728640" Localization-Select="Select PDF">
            </telerik:RadAsyncUpload>
<%--            <span class="allowed-attachments" style="font: italic 10px arial, verdana; color: blue;">
                <asp:Label runat="server" ID="FileTypes" Visible="true" Enabled="false"></asp:Label></span>--%>

        </td>
    </tr>

[Vessy]

Hi Kurt,

The wrapper of the AsyncUpload is a div element, thus it is shown on the next row when it is in the same cell like RadTextBox. You can change that by setting "display:inline-block" style to the AsyncUpload wrapper:

        <style>
            div.RadAsyncUpload {
                display:inline-block;
            }
        </style>
        <table style="width: 700px">
            <tr>
                <td class="LabelStyle-Right" style="vertical-align: top;">Subject:</td>
                <td style="vertical-align: top;">
                    <telerik:RadTextBox ID="_subject" runat="server" MaxLength="100" Width="200"></telerik:RadTextBox>
                    <telerik:RadAsyncUpload ID="_FaxFile" runat="server" Width="100px"
                        AllowedFileExtensions=".pdf" MaxFileInputsCount="1" Visible="true"
                        ToolTip="Select PDF" HideFileInput="true" MaxFileSize="15728640" 
                        Localization-Select="Select PDF">
                    </telerik:RadAsyncUpload> 
                </td>
            </tr>
        </table>

When the AsyncUpload and the TextBox are placed into different cells, the table is calculating the size of the cells dynamically depending on the cells content. You can set the width of the second cell explicitly in order to avoid that:

            <tr>
                <td class="LabelStyle-Right" style="vertical-align: top;">Subject:</td>
                <td style="vertical-align: top;  width:200px">
                    <telerik:RadTextBox ID="_subject" runat="server" MaxLength="100" Width="200"></telerik:RadTextBox>
                </td>
                <td style="vertical-align: top; text-align: left;">
                    <telerik:RadAsyncUpload ID="_FaxFile" runat="server" Width="100px"
                        AllowedFileExtensions=".pdf" MaxFileInputsCount="1" Visible="true"
                        ToolTip="Select PDF" HideFileInput="true" MaxFileSize="15728640" 
                        Localization-Select="Select PDF">
                    </telerik:RadAsyncUpload>
                </td>
            </tr>

 

Regards,
Vessy
Progress Telerik

[Kurt Kluth]

Great thank you Vessy.  

[Vessy]

Hi,

You are welcome, Kurt :)

Regards,
Vessy
Progress Telerik