Removing scrollbar from RadWindow

2 posts, 0 answers
  1. Dusko
    Dusko avatar
    2 posts
    Member since:
    Jul 2013

    Posted 03 Jul 2013 Link to this post

    Code contains RadWindow with RadSplitter, inside which are two RadPanes. Second pane contains RadTextBox. I'am trying to remove scrollbars from window and i tried solutions like Scrolling="None", fixed positioning, but nothing seems to work.


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DefaultCS2.aspx.cs"  Inherits="RadControlsWebApp1.DefaultCS2" %>
     <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI"      %>
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head>
    <title>Modal Popup</title>
    </head>
    <body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" Skin="Office2007" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server"     DecoratedControls="All" EnableRoundedCorners="false" />
     
        <telerik:RadAjaxPanel runat="server" ID="rapConfiguration" LoadingPanelID="ralpConfiguration" HorizontalAlign="NotSet">
            <telerik:RadWindow ID="modalPopup" VisibleStatusbar="false" runat="server" AutoSize="true" OnClientResize="ResizeRadSplitter" OnClientCommand="ResizeRadSplitter">
                <ContentTemplate>
     
                    <telerik:RadSplitter  ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal">
                        <telerik:RadPane ID="Radpane4" runat="server" Width="100%">
                            Splitter Top Pane
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="Radsplitbar4" runat="server" CollapseMode="Forward">
                        </telerik:RadSplitBar>
                        <telerik:RadPane  ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
                            <telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="None" Rows="10" Width="100%"
                                EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="border: none; margin: 0 auto; outline: none">
                            </telerik:RadTextBox>
                        </telerik:RadPane>
                    </telerik:RadSplitter><br />
                </ContentTemplate>
     
            </telerik:RadWindow>
     
        </telerik:RadAjaxPanel>
        <telerik:RadCodeBlock runat="server" ID="rdbScripts">
            <script type="text/javascript">
     
                function ResizeRadSplitter(sender, args) {
                    var splitter = $find("<%=MainSplitter.ClientID %>");
            var container = $telerik.$(sender.get_contentElement());
            splitter.resize(container.width(), container.height());
        }
                function showDialogInitially() {
                    var wnd = $find("<%=modalPopup.ClientID %>");
                    wnd.show();
                    Sys.Application.remove_load(showDialogInitially);
                }
                Sys.Application.add_load(showDialogInitially);
            </script>
        </telerik:RadCodeBlock>
    </form>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 04 Jul 2013 Link to this post

    Hello,

    Here are the two issues with this:
    1)  The splitter should take the size of the window (its width and height are set to 100%) and the window should autosize according to the splitter. This contradiction must be removed:
    <telerik:RadWindow CssClass="holdsSplitter" ID="modalPopup" VisibleStatusbar="false" runat="server" AutoSize="false" OnClientResize="ResizeRadSplitter" OnClientCommand="ResizeRadSplitter">

    2) the splitter container must have overflow: hidden to prevent scrollbars when its size is set to 100%, as shown in this demo:
    .holdsSplitter .rwWindowContent div
    {
        overflow: hidden !important;
    }

    because, by default, the conttent element of RadWindow has overflow: auto set by its scripts.

    Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top