Rank 1
It seems as if there is a layout problem with the RadScheduler's Recurrence Editor in Internet Explorer 11:
When we open a RadWindow showing the recurrence editor in IE11, everything seems to be cramped together. Setting the height and / or width of the RadWindow or Recurrence Editor does not resolve the problem.
See attached images of how it is displayed.
We don't have the same problem in other browsers like Firefox and Chrome and we are using the latest Telerik controls.
Our code is:
<body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSchedulerRecurrenceEditor runat="server" ID="AppointmentRecurrenceEditor" SharedCalendarID="SharedCalendar" StartDate="2000-01-20" /> <telerik:RadCalendar runat="server" ID="SharedCalendar" ShowRowHeaders="false" RangeMinDate="1900-01-01" /> <asp:HiddenField runat="server" ID="OriginalRecurrenceRule" /> </div> </form></body>Thanks
Gerrit
8 Answers, 1 is accepted
Hello Gerrit,
Thank you for contacting us.
We have inspected the provided code snippet, but we were not able to replicate the problem. Please find attached a screenshot that shows how the Recurrence Editor is displayed at our side.
Did you try our demos? Could you observe the same behavior in any of the on-line examples and if so which one?
Can you please, check the version of the Telerik.Web.UI and all of the assembly files in the bin folder of the project as well – are you sure it is 2013.3 1114? Also, what is the exact version of IE11 you are using?
Looking forward to hearing from you.
Regards,
Aneliya Petkova
Telerik
Rank 1
Hi,
I am also having this issue with the Rad-scheduler recurrence sections and IE11.
I attached a screen shot to this reply. The problem exists for all recurrence interval options.
Is there anyway to fix this and/or a patch available?
We are not aware of such issue with RadScheduler's Recurrence Editor.
Could you please confirm which version of Telerik UI for ASP.NET AJAX you are using?
Could you observe this issue in our online demos?
It would be very helpful if you send a sample runnable project showing the issue to inspect it locally.
Regards,
Aneliya Petkova
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Hi Aneliya,
The Telerik version we are running is v4.0.30319.
It will take too much time to try and create an independent project with just the Radscheduler component so i will give you as much detail as I can.
The scheduler is currently running in the following html structure.
<html><body> <form id="Form1" runat="server"> <div > <telerik:RadScheduler runat="server" ID="RadScheduler1" ColumnWidth="14%" Width="100%" DisplayDeleteConfirmation="true" Height="700px" Skin="Web20" ProviderName="SchedulerProvider" GroupBy="Grouping" ShowFullTime="true" OnDataBound="RadScheduler1_DataBound" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound" OnClientAppointmentInserting="RadScheduler1_OnClientAppointmentInserting" OnClientFormCreated="schedulerFormCreated" OnClientAppointmentContextMenu="onClientAppointmentContextMenuHandler" OnAppointmentContextMenuItemClicked="RadScheduler1_OnAppointmentContextMenuItemClicked" OnAppointmentCreated="RadScheduler1_OnAppointmentCreated" OnAppointmentInsert="RadScheduler1_OnAppointmentInsert" OnAppointmentUpdate="RadScheduler1_OnAppointmentUpdate" OnAppointmentClick="RadScheduler1_OnAppointmentClick" OnAppointmentDelete="RadScheduler1_OnAppointmentDelete" OnFormCreated="RadScheduler1_FormCreated" CustomAttributeNames="Profile,Grp,EventColor,Priority" EnableDescriptionField="true" StartEditingInAdvancedForm="true" StartInsertingInAdvancedForm="true" AllowDelete="false" SelectedView="WeekView" MinutesPerRow="30" TimeLabelRowSpan="1" FirstDayOfWeek="Monday" LastDayOfWeek="Sunday" OverflowBehavior="Auto" RowHeight="25px"> <AdvancedForm Modal="true" /> <MultiDayView UserSelectable="true" /> <AppointmentTemplate> <div class="rsAptSubject"> <asp:Panel ID="RecurrencePanel" CssClass="rsAptRecurrence" runat="server" Visible="false"> </asp:Panel> <asp:Panel ID="RecurrenceExceptionPanel" CssClass="rsAptRecurrenceException" runat="server" Visible="false"> </asp:Panel> <%# Eval("Subject") %> </AppointmentTemplate> <AdvancedEditTemplate> <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>' Description='<%# Bind("Description") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' EventColor='<%# Bind("EventColor") %>' Profile='<%# Bind("Profile") %>' Grp='<%# Bind("Grp") %>' Priority='<%# Bind("Priority") %>' /> </AdvancedEditTemplate> <AdvancedInsertTemplate> <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' Description='<%# Bind("Description") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' EventColor='<%# Bind("EventColor") %>' Profile='<%# Bind("Profile") %>' Grp='<%# Bind("Grp") %>' Priority='<%# Bind("Priority") %>' /> </AdvancedInsertTemplate> <TimelineView UserSelectable="false" /> <TimeSlotContextMenuSettings EnableDefault="true" /> <AppointmentContextMenuSettings EnableDefault="false" /> <AppointmentContextMenus> <%--The appointment context menu interaction is handled on the client in this example--%> <%--See the JavaScript code above--%> <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu"> <Items> <telerik:RadMenuItem Text="Edit" Value="CommandEdit"> </telerik:RadMenuItem> <telerik:RadMenuItem IsSeparator="True"> </Items> </telerik:RadSchedulerContextMenu> </AppointmentContextMenus> </telerik:RadScheduler> </div> </form></body></html> <iframe id="ISiteSchedule" frameborder="0" src="../schedule/NewSchedule.aspx" style=" overflow:hidden; height:750px;width:100%"></iframe>You can see that we display the scheduler in an Iframe, not sure would this affect anything.
Also i have noticed that if i change the element below to have the attribute "display:inline-block" it renders it properly, rather than on a separate line.
id="RadScheduler1_Form_AdvancedInsertForm1_AppointmentRecurrenceEditor_DailyRepeatInterval_wrapper"
Hopefully this helps you track down the issue.
I made a sample project using the information you provided, and tested this project in all browsers(including IE11) with two versions of Telerik UI for ASP.NET AJAX(2013 Q3 SP1 and 2015 Q1 SP1), but I was not able to reproduce the issue you are facing(http://screencast.com/t/W4HXM0WLiag). Attached you may find the project. Please test it at your side and modify it to show me what I am missing in order to observe the problem.
Could you please also specify the exact version of Telerik UI for ASP.NET AJAX? In your previous post you have mentioned the .NET Framework version you are using.
Regards,
Aneliya Petkova
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Sorry Aneliya, The Version is 2012.3.1308.45
On a good note, I get the same issue in the test project you attached.
I attached the screenshot, you can see that the 'Recur every' input element is pushed down onto a new line and it causes some of the data to be pushed outside the visible area.
I think i have found a way to override the CSS to fix this issue on our side, but the crux of the issue seems to be the Telerik version we use.
Hopefully this helps.
Thank you for specifying the version of Telerik UI for ASP.NET AJAX you are using. I have successfully reproduced the issue.
If it is not possible for you to upgrade to a newer version of Telerik UI for ASP.NET AJAX at the moment, you can use the following style in order to fix this bug:
html .RadScheduler .rsAdvFormWrap .RecurrenceEditor .rsAdvOptionsPanel .rsAdvPatternPanel .RadInput { display:inline-block;}Hope this will be helpful.
Regards,
Aneliya Petkova
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
Hi Aneliya,
That seems to have fixed the problem.
I also had to add the following for the recurrence range at the end of the page
html .RadScheduler .rsAdvFormWrap .RecurrenceEditor .rsAdvRecurrenceRangePanel .rsAdvOptionsPanel .RadInput { display:inline-block;}
Thank you!