Extra margin in Chrome in new ver

5 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 15 Jun 2012 Link to this post

    Hi,

    I've just installed the new Q2 version of the controls and in the main all is fine.  I have however noticed that in Chrome I end up with an extra margin inside a RadSplitter.  So I tried to inspect the CSS with Chrome, as soon as I try the margin collapses and the page looks as it should.  I've deleted as much as possible on the page to get to a working example.  The following code works in Chrome, you should see a left blue column,  the right column has some text,  the text appears maybe 15-20px away from the blue panel, if you now open it up for inspection the margin disappears.

    Note that if you refresh the page with the inspector open in chrome then the margin appears for half a second or so then disappears.

    Regards,

    Jon

    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
            .surroundPaneBackground
            {
                 background-color: #8ba0bc;
                 height: 100%;
                 width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadStyleSheetManager ID="pgRadStyleSheetManager" runat="server"></telerik:RadStyleSheetManager>
            <telerik:RadScriptManager ID="pgRadScriptManager" runat="server"></telerik:RadScriptManager>
            <div id="ParentDivElement" style="height: 100%;">
                <telerik:RadSplitter ID="uxRadSplitter" runat="server" Height="100%" Width="100%" Orientation="Vertical" LiveResize="true" BorderSize="0">
                    <telerik:RadPane ID="uxRadPaneLeft" runat="server" MinWidth="0"><div class="surroundPaneBackground"></div></telerik:RadPane>
                    <telerik:RadPane ID="uxRadPaneMain" runat="server" Scrolling="none" Width="850">
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Orientation="Horizontal" LiveResize="true" BorderSize="0">
                            <telerik:RadPane ID="uxRadPaneContent" runat="server" Scrolling="none" >
                            aaaa
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
        </form>
    </body>
    </html>


  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Jun 2012 Link to this post

    Hi Jon,

    We are aware of this behavior. However, we have not been able to locate the exact cause of the issue. The problem seems to be an incorrect rendering of the fixed sized and relative (percentage) sized elements by the browser's engine but so far we were unable to isolate the exact issue.

    As a workaround for this behavior, I would suggest you to disable the scrolling for the pane containing the nested div. To do so, you need to set the pane's Scrolling property to None.

    Regards,
    Dobromir
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 18 Jun 2012 Link to this post

    Hi Dobromir,

    Many thanks for that - it worked a treat!

    Best Regards,

    Jon
  5. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 30 Oct 2012 Link to this post

    Hi, I was wondering if this issue was fixed in Q3 2012 as Im experiencing extra margin problems with Chrome using the RadSplitter. This cause appearance of extra horizontal and vertical sliders that are not wanted. I also cant use the mentioned workaround since I need the panes to be scrollable.

    Thank you
  6. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 02 Nov 2012 Link to this post

    Hi Martin,

    Unfortunately we are still not able to detect the exact reason for this behavior and I cannot give you a firm estimate when it will be resolved.

    All the best,
    Vesi
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017