RadScheduler Recurrence Editor layout issue in Internet Explorer 11

9 posts, 0 answers
  1. Gerrit du Preez
    Gerrit du Preez avatar
    35 posts
    Member since:
    Aug 2012

    Posted 16 Jan 2014 Link to this post

    Hi there

    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
  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 17 Jan 2014 Link to this post

    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
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    13 posts
    Member since:
    Apr 2010

    Posted 20 Apr 2015 Link to this post

    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?

     

  5. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 21 Apr 2015 Link to this post

    Hi Andrew,

    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.

     
  6. Andrew
    Andrew avatar
    13 posts
    Member since:
    Apr 2010

    Posted 22 Apr 2015 in reply to Aneliya Petkova Link to this post

    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.

  7. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 23 Apr 2015 Link to this post

    Hi Andrew,

    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.

     
  8. Andrew
    Andrew avatar
    13 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2015 in reply to Aneliya Petkova Link to this post

    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.

  9. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 23 Apr 2015 Link to this post

    Hi Andrew,

    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.

     
  10. Andrew
    Andrew avatar
    13 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2015 in reply to Aneliya Petkova Link to this post

    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!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017