RadDatePicker layout question

6 posts, 0 answers
  1. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 30 May 2014 Link to this post

    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

  2. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 30 May 2014 in reply to Helen Link to this post

    I forgot to attach the screen shot.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Jun 2014 in reply to Helen Link to this post

    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.
  5. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 04 Jun 2014 in reply to Shinu Link to this post

    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>
     
    <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

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1795 posts

    Posted 09 Jun 2014 Link to this post

    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
     

    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.

     
  7. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 10 Jun 2014 in reply to Konstantin Dikov Link to this post

    Konstantin,

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

    Regards,

    Helen
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017