RadDock/RadSplitter Reduntant Scrollbars

4 posts, 0 answers
  1. Victor Campos
    Victor Campos avatar
    17 posts
    Member since:
    Apr 2009

    Posted 02 Mar 2010 Link to this post

    I'm having a hell of a time trying to get this styling to behave.  Maybe I'm pushing the styling limits or possibly putting way too many rad controls together and it's throwing off the style.  However, any help removing the redundant scroll bars is greatly appreciated.

    I have a sandbox project if you'd like me to include it.
  2.
  3. Victor Campos
    Victor Campos avatar
    17 posts
    Member since:
    Apr 2009

    Posted 02 Mar 2010 Link to this post

    Here the code I'm using:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RedundantScrollBars._Default" %> 
    <%@ Register Assembly="Telerik.Web.UI, Version=2009.1.527.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register assembly="Telerik.Web.UI, Version=2009.1.527.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" namespace="Telerik.Charting" tagprefix="telerik" %> 
    <%@ Register TagPrefix="uc" TagName="Filter" Src="~/Filter.ascx" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
        <title></title> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" 
            EnableViewState="true"  
            StoreLayoutInViewState="false"> 
             
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="600px" Height="300px"> 
             
                <telerik:RadDock ID="RadDock1" runat="server" Height="100%"> 
                    <ContentTemplate> 
                     
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" 
                            BorderStyle="None" 
                            Orientation="Vertical"  
                            ResizeWithParentPane="false"  
                            ResizeWithBrowserWindow="false"> 
                             
                            <telerik:RadPane ID="RadPane1" runat="server" 
                                Scrolling="None"  
                                Locked="true"  
                                BorderStyle="None"> 
                                 
                                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" 
                                    SlideDirection="Right"  
                                    BorderStyle="None"  
                                    ClickToOpen="true"> 
                                 
                                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server"  
                                        Title="Filter"  
                                        EnableDock="false"  
                                        Scrolling="Y"> 
                                         
                                        <uc:Filter ID="ucFilter" runat="server" /> 
                                     
                                    </telerik:RadSlidingPane> 
                                 
                                </telerik:RadSlidingZone> 
                             
                            </telerik:RadPane> 
                            <telerik:RadPane ID="RadPane2" runat="server" 
                                BorderStyle="None"  
                                Scrolling="None"> 
                             
                                <telerik:RadChart ID="RadChart1" runat="server"  
                                    SkinsOverrideStyles="false"  
                                    Visible="true"  
                                    SeriesOrientation="Horizontal"  
                                    Width="580px"  
                                    Height="55px"  
                                    AutoTextWrap="true"  
                                    IntelligentLabelsEnabled="true"> 
                                    <PlotArea> 
                                        <EmptySeriesMessage /> 
                                        <Appearance Dimensions-Margins="3px, 25px, 25px, 3px" Position-AlignedPosition="TopLeft"> 
                                            <Shadow Blur="5" Color="Gray" /> 
                                        </Appearance> 
                                    </PlotArea> 
                                </telerik:RadChart> 
                                 
                                <telerik:RadGrid ID="RadGrid1" runat="server" Width="97%" Height="97%" /> 
                             
                            </telerik:RadPane> 
                                                     
                        </telerik:RadSplitter> 
     
                    </ContentTemplate> 
                </telerik:RadDock> 
             
            </telerik:RadDockZone> 
             
        </telerik:RadDockLayout> 
     
        </form> 
    </body> 
    </html> 

    Here's the C# Code:
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Data; 
    using System.Xml.Linq; 
     
    namespace RedundantScrollBars 
    { 
        public partial class _Default : System.Web.UI.Page 
        { 
            protected void Page_Load(object sender, EventArgs e) 
            { 
                DataTable dt = new DataTable(); 
                for (int i = 0; i < 5; i++) 
                { 
                    dt.Columns.Add(new DataColumn(string.Format("dc{0}", i))); 
                } 
     
                for (int i = 0; i < 7; i++) 
                { 
                    DataRow dr = dt.NewRow(); 
                    for (int j = 0; j < dt.Columns.Count; j++) 
                    { 
                        dr[j] = string.Format("col{0}", j); 
                    } 
                    dt.Rows.Add(dr); 
                } 
                RadGrid1.DataSource = dt; 
                RadGrid1.DataBind(); 
            } 
        } 
    } 
    Here's the User Control:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Filter.ascx.cs" Inherits="RedundantScrollBars.Filter" %> 
    <%@ Register Assembly="Telerik.Web.UI, Version=2009.1.527.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 
        Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <asp:Label ID="Label1" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox1" runat="server" /><br /> 
    <asp:Label ID="Label2" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox2" runat="server" /><br /> 
    <asp:Label ID="Label3" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox3" runat="server" /><br /> 
    <asp:Label ID="Label4" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox4" runat="server" /><br /> 
    <asp:Label ID="Label5" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox5" runat="server" /><br /> 
    <asp:Label ID="Label6" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox6" runat="server" /><br /> 
    <asp:Label ID="Label7" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox7" runat="server" /><br /> 
    <asp:Label ID="Label8" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox8" runat="server" /><br /> 
    <asp:Label ID="Label9" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox9" runat="server" /><br /> 
    <asp:Label ID="Label10" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox10" runat="server" /><br /> 
    <asp:Label ID="Label11" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox11" runat="server" /><br /> 
    <asp:Label ID="Label12" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox12" runat="server" /><br /> 
    <asp:Label ID="Label13" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox13" runat="server" /><br /> 
    <asp:Label ID="Label14" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox14" runat="server" /><br /> 
    <asp:Label ID="Label15" runat="server" Text="Label" /><telerik:RadTextBox ID="RadTextBox15" runat="server" /><br /> 
    <asp:Button ID="Button1" runat="server" Text="Button" /><asp:Button ID="Button2" runat="server" Text="Button" /> 

    Again, any help is greatly appreciated.

    -v





  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 04 Mar 2010 Link to this post

    Hi Victor,

    I believe the problem exists in IE6 and IE7 only. RadDock is rendered as a <div> element and if the vertical scroll-bar appears on the <div> the horizontal will also appear if any of the inner HTML elements has width:100%. This is because the browser does not take into consideration the width of the vertical scroll-bar when calculating the width of the <div>. Here is an example demonstrating this behavior:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" EnableViewState="true"
            StoreLayoutInViewState="false">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="600px" Height="300px">
                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Height="100px" Title="RadDock-Title">
                    <ContentTemplate>
                        <div style="width: 100%;">
                            <br />
                            <br />
                            <br />
                            <br />
                            Content
                            <br />
                            <br />
                        </div>
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        <div style="width: 300px; height: 100px; border: 1px solid red; overflow: auto;">
            <div style="width: 100%;">
                <br />
                <br />
                <br />
                <br />
                Content
                <br />
                <br />
            </div>
        </div>
        </form>
    </body>
    </html>

    To overcome the issue you should disable the horizontal scroll-bar on the docks using the following style:

    <style type="text/css">
        .rdContent
        {
            overflow-x: hidden !important;
        }
    </style>



    Best wishes,
    Pero
    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.
  7. Victor Campos
    Victor Campos avatar
    17 posts
    Member since:
    Apr 2009

    Posted 04 Mar 2010 Link to this post

    Thanks - i was hoping the fix was different.  We did add this fix back a few days ago but we thought it was a bit of a hack and left it in your hands instead.  However, I tend to forget that we have to do hacks every now and again for working around IE.
  8.
Back to Top