RadDatePicker layout question

[Helen]

Hi,

Is there a way to make the DateInput control to be on the same line as the label instead of a new line? I also have a hard time moving the icon closer to the DateInput box.  I tried to play around with the width of the container, DateInput-Width, DateInput-LabelWidth, but couldn't get it to work.  Perhaps I need to tweek the HTML as presented in this doc? 

http://www.telerik.com/help/aspnet-ajax/calendar-understanding-skin-css-file.html

I have attached a screen shot of what my RadDatePicker and here's a portion of my ascx code:

<style type="text/css">
    .forecast {
        width:inherit;
        height:inherit;
    }

    .closedate {
        float:left;

        display: inline-block;
        background-color:aqua;
        width:300px;
    }
    .probability {
        clear:right;
        display: inline-block;
        background-color:orange;
        width: 180px;
    }
    .product {
        float:left;
        display: inline-block;
        background-color:green;
        width: 230px;
    }
    .expectamt {
        float:left;

        display: inline-block;
        background-color:yellow;
        width: 180px;
    }
</style>

<asp:HiddenField ID="leadIdHidden" runat="server" />
<asp:FormView ID="DetailForecastFormView" runat="server" DataSourceID="ObjectDataSource1" DataKeyNames="lead_id" OnDataBound="DetailForecastFormView_DataBound" BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1">
    <EditRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
    <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
    <ItemTemplate>
        <div class="forecast">
            <%--<asp:Label ID="leadLabel" runat="server" Text='<%# Eval("lead_id") %>'></asp:Label>--%>

            <div class="closedate">
                <%--<asp:Label ID="Label1" runat="server" Text="Expected Close Date:" />--%>
                    <%--<telerik:RadDatePicker ID="RadExpectCloseDate" runat="server" DateInput-Label="Exp.Date:" DateInput-Width="100px" DateInput-LabelWidth="60px"  SelectedDate='<%# Eval("update_dtime") %>'  />--%>
                <telerik:RadDatePicker ID="RadExpectCloseDate" runat="server" SelectedDate='<%# Eval("update_dtime") %>' >
                    <DateInput runat="server" Label="Expected Date:" LabelWidth="100%"></DateInput>
                </telerik:RadDatePicker>
            </div>

            <div class="probability">
                <telerik:RadNumericTextBox ID="RadProbTextBox" runat="server" Label="Probability To Close:" LabelWidth="100px" Type="Percent" DbValue='<%# Eval("perc_to_close") %>' />
                <%--<telerik:RadSlider ID="RadSlider1" runat="server" />--%>

            </div>

            <div class="product">
<%--                <telerik:RadComboBox ID="RadProductComboBox" runat="server" Label="Product:" DataSourceID="ProductDataSource" SelectedValue='<%# Eval("product_id") %>'
                            DataTextField="product_name" DataValueField="product_id" AllowCustomText="true" EmptyMessage="Please select a product" />--%>
                <telerik:RadComboBox ID="RadProductComboBox" runat="server" Label="Product:" AllowCustomText="true" EmptyMessage="Please select a product" />

            </div>
            <div class="expectamt">
                <telerik:RadNumericTextBox ID="RadExpectAmtTextBox" runat="server" Label="Expected Amount:" LabelWidth="100px" Type="Currency" DbValue='<%# Eval("exp_points") %>' />
            </div>
        </div>
    </ItemTemplate>

    <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#DEDFDE" ForeColor="Black" />

</asp:FormView>

Thank you,

Helen

[Helen]

I forgot to attach the screen shot.

[Shinu]

Hi Helen,

Please do the following modification in your code snippet which works fine at my end.

ASPX:

...
<telerik:RadDatePicker ID="RadExpectCloseDate" runat="server" SelectedDate='<%# Eval("OrderDate") %>'>
    <DateInput ID="DateInput1" runat="server" Label="Expected Date:" LabelWidth="100%">
    </DateInput>
</telerik:RadDatePicker>
...

CSS:

.RadPicker_Default .rcCalPopup
{
    margin-left: 352%;
}
html body .riSingle .riTextBox[type="text"]
{
    padding-left: 62px !important;
}

Let me know if you have any concern.
Thanks,
Shinu.

[Helen]

Shinu,

I tried the code you provided,  but I'm still getting the same behavior.  If I use the DateInput-Label, it seems to push the textbox down a line instead of remaining on the same line with the label as shown in the screen shot.  I couldn't make the calendar popup button to stay next to the textbox.  I rewrote a small sample to show you what I did.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTelerik.aspx.cs" Inherits="TestTelerik" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadPicker_Default .rcCalPopup
        {
            margin-left: 352%;
        }
        html body .riSingle .riTextBox[type="text"]
        {
            padding-left: 62px !important;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
    <div>
        <telerik:RadDatePicker ID="RadExpectCloseDate" runat="server" >
            <DateInput ID="DateInput1" runat="server" Label="Expected Date:" LabelWidth="100%">
            </DateInput>
        </telerik:RadDatePicker>
    </div>
        <p></p>
    <div>
        <asp:Label ID="Label1" runat="server" Text="Expected Date:" />
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" />
    </div>
    </form>
</body>
</html>

Thank you,

Helen

[Konstantin Dikov]

Hello Helen,

The issue that you are describing could be observed in IE 7 only (or in Compatibility View Mode). In general, we highly recommend using separate Label control, since this is the cleanest and more customizable approach when using RadDateInput controls. 

Nevertheless, for fixing the issue that you are observing, what I could suggest is that you set a custom CSS class to the label element and force it's width to be less than the calculation from the controls. Following is a simple demonstration of such approach:

<telerik:RadDatePicker ID="RadExpectCloseDate" runat="server" Width="250px">
    <DateInput ID="DateInput1" runat="server" Label="Expected Date:" LabelCssClass="labelClass" Width="60%">
    </DateInput>
</telerik:RadDatePicker>

And the CSS:

<style type="text/css">
   .labelClass {
       width: 35% !important;
   }
</style>

Please note that the other part of your CSS is removed.

Hope this helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Helen]

Konstantin,

I will go with your recommended way and thanks for showing me the fix.

Regards,

Helen