This is a migrated thread and some comments may be shown as answers.

Scheduler rendering wide on load IE9

5 Answers 41 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Gavin asked on 20 Jun 2012, 01:37 AM

scheduler-cutoff.jpg

Hi,

I have a schedule control that is rendering wide on load in IE9 (See attached). The scheduler sizes correctly if I resize the browser window after load but gets it wrong on load.

The version is 2012.1.411.35.

How can I get it to render correctly on load? The scheduler needs to autosize to remaining page space.

Thanks

Gavin.

Here is the code

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Scheduler._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register src="AdvancedForm.ascx" tagname="AdvancedForm" tagprefix="scheduler" %>

<!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>Schedule</title>

<link href="css/schedule.css" rel="stylesheet" type="text/css" />

<link href="css/Teleric1.css" rel="stylesheet" type="text/css" />

<link href="css/Teleric2.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.RadScheduler .rsAptSubject

{

text-align: left;

padding: 4px 0 1px;

margin: 0 0 3px;

font-size: 12px;

font-weight: bold;

color: #369;

height: 17px;

border-bottom: 1px solid #99DEFD;

width: 100%;

}

.RadScheduler .rsAdvancedEdit .RadColorPicker label

{

text-align: left;

display: block;

padding: 0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

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

<asp:ScriptReference Path="~/AdvancedForm.js"></asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<div id="page-wrap">

<div id="page">

<div id="menu">

menu

</div>

<div id="pagecontent">

<div style="float:left; width: 2%"> </div>

<div style="float:left; width: 98%">

<div id="content">

<div class="Left">

<telerik:RadCalendar ID="RadCalendar1" Runat="server"

CultureInfo="English (Australia)" EnableMultiSelect="False" SelectedDate=""

ViewSelectorText="x" AutoPostBack="True"

onselectionchanged="RadCalendar1_SelectionChanged">

<DayOverStyle CssClass="rcHover"></DayOverStyle>

<FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Default"></FastNavigationStyle>

<DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle>

<WeekendDayStyle CssClass="rcWeekend"></WeekendDayStyle>

<ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle>

<SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle>

<CalendarTableStyle CssClass="rcMainTable"></CalendarTableStyle>

<OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle>

<SpecialDays>

<telerik:RadCalendarDay Date="" Repeatable="Today">

<ItemStyle CssClass="rcToday" />

</telerik:RadCalendarDay>

</SpecialDays>

<OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle>

</telerik:RadCalendar>

</div>

<div class="Right">

<telerik:RadScheduler ID="RadScheduler1" runat="server"

DataEndField="EndDate"

DataKeyField="id"

DataRecurrenceField="RecurrenceField"

DataRecurrenceParentKeyField="ParentID"

DataStartField="StartDate"

DataSubjectField="Subject"

onappointmentinsert="RadScheduler1_AppointmentInsert"

onappointmentupdate="RadScheduler1_AppointmentUpdate"

onappointmentdelete="RadScheduler1_AppointmentDelete"

GroupBy="Users" Height="600px" MinutesPerRow="15"

onnavigationcomplete="RadScheduler1_NavigationComplete"

StartInsertingInAdvancedForm="True">

<ResourceTypes>

<telerik:ResourceType Name="Users" KeyField="id" TextField="name" ForeignKeyField="UserID" />

</ResourceTypes>

<AdvancedForm Modal="true" />

<AdvancedEditTemplate>

<scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>'

Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'

RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' UserID='<%# Bind("Users") %>'

/>

</AdvancedEditTemplate>

<TimelineView UserSelectable="False" />

<AdvancedInsertTemplate>

<scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>'

Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'

RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' UserID='<%# Bind("Users") %>'

/>

</AdvancedInsertTemplate>

</telerik:RadScheduler>

</div>

<div class="clear"></div>

</div>

</form>

</body>

</html>

CSS

body

{

font: 12px/16px Tahoma;

margin: 3px;

}

#page-wrap

{

width: 100%;

min-width: 1261px;

min-height: 667px;

height: auto;

}

#page

{

height: auto;

min-height: 667px;

min-width: 1261px;

}

#menu

{

float: left;

width: 179px;

min-height: 667px;

height: auto;

}

#pagecontent

{

float: left;

width: auto;

min-width: 1051px;

min-height: 667px;

height: auto;

border-left: solid 1px #338c26;

}

#content

{

width: auto;

min-width: 1051px;

}

#content .Left

{

float: left;

width: 225px;

}

#content .Right

{

}

.clear

{

clear: both;

}

5 Answers, 1 is accepted

answered on 06 Jul 2012, 04:56 AM

Hi Peter,

This sort of worked. It worked in my test application but when I put it into my actual one it improved it but did not fix it.

Looking at the styles at runtime on the scheduler it seems to be rendering one of the inner DIV's wider than it's parent.

This is what I see.

div class=right width = 1675.8px (my container div)

div class = RadScheduler RadScheduler_Telerik width = 1450.8px (scheduler container)

div class = rsTopWrap width = 1531px (from inline style)

The last one seems to be the problem as for some reason it's calculating it's width wider than it's parent and this the affects the view of the scheduler as it's then chopped off.

Any other ideas?

Thanks

Gavin.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Scheduler rendering wide on load IE9

5 Answers, 1 is accepted