IE9: Timeline slots not matching

7 posts, 0 answers
  1. Testman
    Testman avatar
    8 posts
    Member since:
    Jul 2010

    Posted 15 Apr 2011 Link to this post

    I have a problem with the TimeLine view and Internet Explorer 9. The columns in the header is not matching the columns below in IE 9 (it works in compatibility mode). I have provided screenshots from IE9 using the standard mode and the compatibility mode, and the code used to create this bug.


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="manager" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadScheduler ID="scheduler" runat="server" SelectedView="TimelineView"
                RowHeight="40px" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start"
                DataEndField="End" >
                <TimelineView NumberOfSlots="24" SlotDuration="0:15" ColumnHeaderDateFormat="h tt"
                    TimeLabelSpan="4" ShowInsertArea="false"  />
            </telerik:RadScheduler>
        </div>
        </form>
    </body>
    </html>
  2.
  3. Michael
    Michael avatar
    17 posts
    Member since:
    Aug 2010

    Posted 17 Apr 2011 Link to this post

    I'm having this same problem.  It occurs when TimeLabelSpan is greater than 1.
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 18 Apr 2011 Link to this post

    Hello guys,

    This is a recently discovered bug. For now you can use the following css fix:
    .rsHidden 
    { 
       display: block!important; 
    } 

    We will have to do to more research and testing to make a permanent fix in the RadScheduler css styles.



    Regards,
    Peter
    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.

  7. Testman
    Testman avatar
    8 posts
    Member since:
    Jul 2010

    Posted 18 Apr 2011 Link to this post

    Seems to work. Thanks for your help
  8.
  9. Calvin
    Calvin avatar
    26 posts
    Member since:
    Mar 2011

    Posted 05 May 2011 Link to this post

    without followed by with


    As you can see this doesn't fix the issue for me at least these caps are using chrome too btw.
  11. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    649 posts

    Posted 11 May 2011 Link to this post

    Hi Calvin,

    For your particular case, you will need the following snippet:

    .rsHidden {
            padding: 0 !important;
            height: 0 !important;
            font-size: 0 !important;
            line-height: 0 !important;
            display: block!important;
            display: table-row !important;
        }  
        .rsHidden td {
            padding: 0 !important;
            height: 0 !important;
            font-size: 0 !important;
            line-height: 0 !important;
        }

    The problem you observed is because, according to standards and in new browsers, TR elements are no display: block, but "table-row".

    The rest of the snippet is just ensuring the cells will be as small as possible.

    Regards,
    Ivan Zhekov
    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.

  13. Joe
    Joe avatar
    3 posts
    Member since:
    Jul 2011

    Posted 29 Jul 2011 Link to this post

    this fixed it for me. thanks!
  14.
Back to Top