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

Removing scrollbar from RadWindow

1 Answer 533 Views

Window

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

Dusko asked on 03 Jul 2013, 05:08 PM

whatIneed.png

whatIget.png

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

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

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

1 Answer, 1 is accepted

answered on 04 Jul 2013, 02:18 PM

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.