This is a migrated thread and some comments may be shown as answers.

RadDock/RadSplitter Reduntant Scrollbars

3 Answers 129 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Victor Campos asked on 02 Mar 2010, 07:53 PM

pic2.jpg

pic1.jpg

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.

3 Answers, 1 is accepted

answered on 02 Mar 2010, 10:40 PM

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

answered on 04 Mar 2010, 03:16 PM

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" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

Content

<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 />

Content

<br />

</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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadDock/RadSplitter Reduntant Scrollbars

3 Answers, 1 is accepted