Quick question - I've been trying to figure out how to horizontally align these columns of a simple instance of RadCalendar using 100% width and inside of a fixed width div.
Image: http://i.imgur.com/ksOfZ.jpg
Code:
Appreciate any help. Thanks.
-- Mike
Image: http://i.imgur.com/ksOfZ.jpg
Code:
<div style="width:400px; vertical-align:top;"> <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Width="100%" PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true" EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false" OnDayRender="RadCalendar1_DayRender" OnPreRender="RadCalendar1_PreRender"> <DayStyle HorizontalAlign="Center" /> <SpecialDays> <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" /> </SpecialDays> </telerik:RadCalendar> </div>Appreciate any help. Thanks.
-- Mike
3 Answers, 1 is accepted
0
Hello Mike,
I am not sure what exactly causes the problem on your side because when I browsed the following mark-up in IE7/8/9 the result was different than your screenshot (see attachment).
What exactly do you do in PreRender and DayRender event handlers? Are there any other styles on the page that influence the RadCalendar look?
Best wishes,
Tsvetina
the Telerik team
I am not sure what exactly causes the problem on your side because when I browsed the following mark-up in IE7/8/9 the result was different than your screenshot (see attachment).
<div style="width: 400px; vertical-align: top;"> <telerik:RadCalendar ID="RadCalendar1" runat="server" AutoPostBack="true" Width="100%" PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true" EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false"> <DayStyle HorizontalAlign="Center" /> <SpecialDays> <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" /> </SpecialDays> </telerik:RadCalendar> </div>What exactly do you do in PreRender and DayRender event handlers? Are there any other styles on the page that influence the RadCalendar look?
Best wishes,
Tsvetina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Mike
Top achievements
Rank 2
Rank 2
answered on 07 Apr 2011, 04:17 PM
Try using Windows 7 skin, it seems to be an issue specifically with that skin. Here are two calendars, one Windows 7, one Default skin.
http://i.imgur.com/CN0W1.jpg
http://i.imgur.com/CN0W1.jpg
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> </head><body> <form id="form1" runat="server"> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <div style="width: 400px; vertical-align: top;"> <telerik:RadCalendar ID="RadCalendarWindows7" runat="server" Skin="Windows7" Width="100%" PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true" EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false"> </telerik:RadCalendar> </div> <br /> <div style="width: 400px; vertical-align: top;"> <telerik:RadCalendar ID="RadCalendar_Default" runat="server" Skin="Default" Width="100%" PresentationType="Preview" DayNameFormat="Short" ShowRowHeaders="false" ShowOtherMonthsDays="true" EnableMultiSelect="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false"> </telerik:RadCalendar> </div> </telerik:RadAjaxPanel> </form></body></html>0
Hi Mike,
Indeed, there seems to be a difference in one of the calendar styles for Windows7 skin. I will forward this to our front end developers to take a look at. In the meantime, the following CSS should help you get the same look for this skin:
All the best,
Tsvetina
the Telerik team
Indeed, there seems to be a difference in one of the calendar styles for Windows7 skin. I will forward this to our front end developers to take a look at. In the meantime, the following CSS should help you get the same look for this skin:
table.RadCalendar_Windows7 .rcMain .rcRow a, .RadCalendar_Windows7 .rcMain .rcRow span { width:auto; }All the best,
Tsvetina
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.