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

Scheduler rendering wide on load IE9

5 Answers 33 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Gavin
Top achievements
Rank 1
Gavin asked on 20 Jun 2012, 01:37 AM

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">
  
<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>
                    </div>
                </div>
            </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

Sort by
0
Peter
Telerik team
answered on 22 Jun 2012, 10:44 AM
Hello Gavin,

Please, try the following and let me know if it helps -
<script type="text/javascript">
       function pageLoad()
       {
           var scheduler = $find('<%=RadScheduler1.ClientID %>');
           scheduler.repaint();
       }
   </script>


Kind regards,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Gavin
Top achievements
Rank 1
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.

0
Peter
Telerik team
answered on 10 Jul 2012, 11:48 AM
Hello Gavin,

The problem is probably caused by these settings:
<div style="float: left; width: 2%">
                </div>
<div style="float: left; width: 98%">

I am not sure what exactly does this achieve, but I suggest you try removing them and check if this helps overcome the issue.

All the best,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Gavin
Top achievements
Rank 1
answered on 10 Jul 2012, 10:50 PM

Hi Peter,

That HTML spaces the page content away from the side menu, so I can't remove those elements.  I will try using padding instead, though that may cause other issues.

Cheers

Gavin.

0
Gavin
Top achievements
Rank 1
answered on 13 Aug 2012, 01:34 AM

I have finally solved this issue by changing the 2% div to a margin 10px on the main div as well as calling repaint in the pageLoad method.

cheers

Gavin.

Tags
Scheduler
Asked by
Gavin
Top achievements
Rank 1
Answers by
Peter
Telerik team
Gavin
Top achievements
Rank 1
Share this question
or