How to get two datepickers on same line?

Question

I have two RadDatePickers, one label and a button. I'm trying to create a form for user to select two dates to set a time period. The problems I'm having is that the RadDatepickers won't stay on the same line. All these elements are within a table. I want them in one row, instead the elements appear one below the other.

Here's my code :

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel5" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">

                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="nameSearch" runat="server" 
                            GroupName="searchRad" Text="Company Name" 
                            AutoPostBack="True" oncheckedchanged="nameSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="dateSearch" runat="server" GroupName="searchRad" 
                            Text="Date Created" 
                            AutoPostBack="True" oncheckedchanged="dateSearch_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                            &nbsp;&nbsp;
                            <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Please help me. Thanks in advance.

score 0 · Answer 1 · answered Mar 11 '15 at 09:50

Remove two empty TD in last TR and colspan="3"
Change your last TR block like below

               <tr>
                    <td bgcolor="#EEF4FD" class="style83" colspan="3">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                            &nbsp;&nbsp;
                            <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                        </asp:Panel>
                    </td>
                </tr>

Is there any way to have the elements on the same line, without removing the empty `TD`s? I need the two empty `TD`s. — ProblemChild, Mar 11 '15 at 10:01
@ProblemChild You can try giving fixed width to 3rd TD, So your contents will fix in one line — Rahul Nikate, Mar 11 '15 at 10:05
You can post it as an answer. So It may useful to future users. — Rahul Nikate, Mar 11 '15 at 10:10

score 0 · Answer 2 · answered Mar 11 '15 at 10:20

I figured it out.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel5" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="nameSearch" runat="server" 
                        GroupName="searchRad" Text="Company Name" 
                        AutoPostBack="True" oncheckedchanged="nameSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="dateSearch" runat="server" GroupName="searchRad" 
                        Text="Date Created" 
                        AutoPostBack="True" oncheckedchanged="dateSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <asp:Table ID="pnlTable" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell>
                                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                                        </telerik:RadDatePicker>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                                        </telerik:RadDatePicker>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                                    </asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

How to get two datepickers on same line?

2 Answers2