Calander is showing on the right, but should be showing on the left.

3 posts, 1 answers
  1. Lex
    Lex avatar
    9 posts
    Member since:
    Mar 2014

    Posted 12 May 2014 Link to this post

    I have set up a Rad DatePicker, with a Calendar and a DateInput field, however I want the date input field to show on the left of the calendar, currently the Calendar is showing to the right of the dateInput control. Is there any simple way of doing this?


    <telerik:RadDatePicker ID="dpDate" runat="server" Skin="TestSkin" EnableEmbeddedSkins="false">
                                <DateInput ID="diInput" DateFormat="dd/MM/yyyy" DisplayDateFormat="dd/MM/yyyy" runat="server" Enabled="false"
                                    DisabledStyle-ForeColor="Black" BorderStyle="None" BackColor="White">
                                </DateInput>
                                <Calendar ID="calDate" ShowRowHeaders="false" runat="server" EnableEmbeddedSkins="false"
                                    Skin="TestSkin">
                                    <ClientEvents OnDateSelecting="DateSelected" />
                                    <SpecialDays>
                                        <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                                    </SpecialDays>
                                </Calendar>
                            </telerik:RadDatePicker>
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 May 2014 in reply to Lex Link to this post

    Hi Lex,

    Please try the following CSS which works fine at my end.

    ASPX:
    <telerik:RadDatePicker ID="dpDate" runat="server" Skin="TestSkin" EnableEmbeddedSkins="false">
        <DateInput ID="diInput" DateFormat="dd/MM/yyyy" DisplayDateFormat="dd/MM/yyyy" runat="server"  DisabledStyle-ForeColor="Black" BorderStyle="None" BackColor="White">
        </DateInput>
        <Calendar ID="calDate" ShowRowHeaders="true" runat="server" CssClass="change-position"
            EnableEmbeddedSkins="false" Skin="TestSkin">
            <SpecialDays>
                <telerik:RadCalendarDay Repeatable="Today" Date="" />
            </SpecialDays>
        </Calendar>
    </telerik:RadDatePicker>

    CSS :
    <style type="text/css">
        .change-position
        {
            margin-left: 37% !important;
        }
        .rcShadBL
        {
            display: none;
        }
    </style>

    Let me know if you have any concern.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lex
    Lex avatar
    9 posts
    Member since:
    Mar 2014

    Posted 13 May 2014 in reply to Shinu Link to this post

    Thank you very much, this got me 95% there. I just had to change some of the values slightly.
Back to Top