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

[Lex]

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>

[Shinu]

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.

[Lex]

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