RadDock layout issue IE8 Q2 2010

3 posts, 0 answers
  1. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 30 Jul 2010 Link to this post

    Hello,

    After I upgraded to the Q2 2010 .Net 3.5 release I am having some layout issues with RadDock and IE8. Chrome is fine.

    Below two links to screenshot to show what I mean. The only custom style I applied to the docks is the bottom padding to keep them apart:

    DIV.RadDock
    {
        margin-bottom: 14px;
    }

    Screen from Chrome (all ok): http://www.opcg.com/telerik2.png
    Screen from IE8 (glitsches): http://www.opcg.com/telerik1.png

    Is this an known issue, or do you need me to send more code, give you access or something else maybe to determine whats wrong?

    With regards,

    Jeroen
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 30 Jul 2010 Link to this post

    Hello Jeroen,

    I have tried to reproduce the reported problem but to no avail. The custom CSS, that you have used, works as expected - apples margin-bottom of 14 pixels after each RadDock, and I don`t see any problems in IE8. Could you send us a live url to your application, so we would be able to investigate it further? Bellow is the code I have used trying to reproduce the problem:

    <!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>
        <style type="text/css">
            DIV.RadDock
            {
                margin-bottom: 14px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSkinManager runat="server" ID="rsm1" Enabled="true" ShowChooser="true">
        </telerik:RadSkinManager>
        <telerik:RadDockLayout ID="layout1" runat="server">
            <telerik:RadDockZone ID="Zone1" runat="server" Width="300px" MinHeight="300px">
                <telerik:RadDock ID="rd1" runat="server" Width="300" Height="300" Title="Can we recascade it?"
                    EnableRoundedCorners="true" Skin="WebBlue">
                    <ContentTemplate>
                        <div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a velit urna, eu
                            dictum enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
                            ridiculus mus. Vivamus at risus nec eros pellentesque tempus. Quisque cursus purus
                            sed odio faucibus nec faucibus risus commodo. Cum sociis natoque penatibus et magnis
                            dis parturient montes, nascetur ridiculus mus. Quisque rutrum consectetur nisl,
                            et tempus nisl aliquet in. Nam vitae mauris lobortis velit euismod rhoncus. Nullam
                            dui sem, sollicitudin id volutpat tempus, vestibulum eu urna. Pellentesque tortor
                            orci, pretium et imperdiet eu, feugiat sit amet magna. Ut tempor sem quis orci facilisis
                            commodo.
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock1" runat="server" Width="300" Height="300" Title="Can we recascade it?"
                    EnableRoundedCorners="true" Skin="WebBlue">
                    <ContentTemplate>
                        <div>
                            Vivamus dui ipsum, faucibus quis blandit a, faucibus eget elit. Aliquam scelerisque
                            sagittis consectetur. Sed et erat ut nulla tincidunt suscipit. Suspendisse quis
                            lectus nec eros commodo lacinia non ut libero. Suspendisse potenti. Aliquam erat
                            volutpat. Quisque facilisis tempor lectus, ac lacinia neque consectetur vel. Nulla
                            rhoncus convallis accumsan. Etiam sodales sollicitudin urna mattis mollis. Praesent
                            sapien leo, pharetra eget lacinia vitae, rhoncus vitae mauris. Vivamus ut nisi eros,
                            venenatis congue enim. Sed et mauris vitae metus egestas elementum fermentum ultrices
                            mauris. Proin id vestibulum urna. Nam volutpat posuere tellus vulputate semper.
                            Vivamus hendrerit tincidunt massa vitae posuere. Aliquam erat volutpat. Quisque
                            tincidunt consequat velit in accumsan. Integer feugiat magna eu est dictum sit amet
                            volutpat enim luctus.
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Width="300" Height="300" Title="Can we recascade it?"
                    EnableRoundedCorners="true" Skin="WebBlue">
                    <ContentTemplate>
                        <div>
                            Pellentesque eget turpis nec dolor euismod scelerisque. Ut ultrices cursus diam
                            vitae hendrerit. Vivamus gravida ante nec leo ultricies sit amet fermentum orci
                            dapibus. Nam ultrices elementum velit, nec sollicitudin justo pretium sed. Integer
                            pretium eros in mi mattis vitae tincidunt tortor congue. Nam quis condimentum ligula.
                            Phasellus volutpat laoreet arcu ac iaculis. Nulla facilisi. Vestibulum volutpat
                            condimentum lacus, et tincidunt nisl pretium eget. Cum sociis natoque penatibus
                            et magnis dis parturient montes, nascetur ridiculus mus. Praesent tincidunt magna
                            vel ante hendrerit aliquam. Ut lobortis lobortis nunc, et semper lectus tincidunt
                            id. Nam tincidunt cursus orci nec iaculis.
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>

    Attached is dockie8.gif showing the result from the above code in IE8.

    Best wishes,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 30 Jul 2010 Link to this post

    Hi there,

    Thank you for your reply. Your sample worked as expected. I have found the issue.

    Much to my embarrassment I noticed that IE had zoomed to 110%. This causes the glitches. Displaying at 100% and it's fine.

    I somehow missed the zoom. Sorry for the inconvenience.


    Regards

    Jeroen
Back to Top