Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

problem with horizontal scroll

1 Answer 78 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Reiner
Top achievements
Rank 1
Reiner asked on 20 Jan 2009, 09:07 AM
Hello,

the next problem. I don't want to use the scrollbars of the radpane. I want to use the scrollbars of the browser.
But I have problems with the horizontal scrollbar, it don't expand on the full width of the content.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"  
Inherits="cari._Default"  ValidateRequest="false" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<!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" style="margin:0px;" > 
<head id="Head1" runat="server"> 
    <title>Car-I Solutions</title> 
    <link rel="stylesheet" type="text/css" href="Styles/cari.css" /> 
</head> 
<body style="height:100%;margin:0px;"> 
    <script language="javascript"> 
            function UpdateCustomizationWindowValue() { 
    var element = document.getElementById("btnCustWindow"); 
    if(element == null) return; 
    element.value = (grid.IsCustomizationWindowVisible() ? "Schliesse" : "Zeige") + " Bearbeitungsfenster"; 
} 
function ShowHideCustomizationWindow() { 
    if(grid.IsCustomizationWindowVisible()) 
        grid.HideCustomizationWindow(); 
    else grid.ShowCustomizationWindow();         
    UpdateCustomizationWindowValue(); 
} 
        </script> 
        <script language="javascript" type="text/javascript"><!-- 
    // <!CDATA[ 
    function OnMoreInfoClick(element, keyValue) { 
        fzpopup.SetContentUrl('common/controllloader.aspx?control=fzdetail.ascx&fz_id=' + keyValue); 
        fzpopup.Show(); 
    } 
    //--></script> 
    <form id="form1" runat="server" style="height:100%;margin:0px;"> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"></telerik:RadAjaxManager> 
        <telerik:RadScriptManager id="RadScriptManager1" Runat="server" AsyncPostBackTimeout="600"> 
        </telerik:RadScriptManager> 
    <div style="height:100%;margin:0px;"> 
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" HorizontalAlign="NotSet" LoadingPanelID="RadAjaxLoadingPanel1" UpdateMode="Conditional"> 
        <telerik:RadToolBar id="RadToolBar1" Runat="server" OnButtonClick="RadToolBar1_ButtonClick" 
            Skin="Office2007" style="width:100%"> 
            <Items>                 
                <telerik:RadToolBarButton runat="server" Text="Home"> 
                    <ItemTemplate> 
                        &nbsp;&nbsp;<asp:ImageButton runat="server" ID="btn_home" ImageUrl="~/images/Home16.png" OnClick="btn_home_Click" />&nbsp;&nbsp; 
                    </ItemTemplate> 
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarButton runat="server" Text="Search"> 
                    <ItemTemplate> 
                        <asp:Panel runat="server" ID="pan_search" DefaultButton="btn_search"> 
                            &nbsp; 
                            <telerik:RadTextBox ID="tb_search" runat="server"> 
                            </telerik:RadTextBox>&nbsp; 
                            <asp:ImageButton runat="server" ID="btn_search" ImageUrl="~/images/Search16.png" OnClick="btn_search_Click" />&nbsp;&nbsp; 
                        </asp:Panel> 
                    </ItemTemplate> 
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarButton runat="server" Text="LogInfo"> 
                    <ItemTemplate> 
                        <asp:LoginName ID="LoginName1" runat="server" />&nbsp; 
                        <asp:LoginStatus ID="LoginStatus1" runat="server" /> 
                    </ItemTemplate> 
                </telerik:RadToolBarButton> 
            </Items> 
            <CollapseAnimation Duration="200" Type="OutQuint" /> 
        </telerik:RadToolBar> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Office2007" Width="100%" Height="95%" SplitBarsSize="">             
            <telerik:RadPane ID="splitpan_menue" runat="server" Height="95%" Width="200" Scrolling="None" >                 
                        <telerik:RadPanelBar ID="RadPanelBar_Funktionen" runat="server" PersistStateInCookie="True" Skin="WebBlue" Width="195px"> 
                            <Items> 
                                <telerik:RadPanelItem Text="Auswertungen" runat="server" Expanded="True"> 
                                    <Items> 
                                        <telerik:RadPanelItem runat="server"> 
                                            <ItemTemplate> 
                                                <telerik:RadTreeView ID="tv_auswertungen" runat="server" Skin="Office2007" OnNodeClick="NodeClick"> 
                                                    <Nodes> 
                                                        <telerik:RadTreeNode Text="Bestand" Expanded="True" Checkable="False" ExpandMode="ClientSide"> 
                                                            <Nodes> 
                                                                <telerik:RadTreeNode runat="server" Text="Bestandsliste" Value="reports/bestand_liste.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Bestand Übersicht" Value="reports/rep_bestanduebersicht.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Bestands Auswertungen" Value="reports/rep_bestand_standtaggruppe.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Bestandsentwicklung" Value="webparts/wp_gwbestandentwicklung.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Bestands Bewertung" Value="reports/dispo/rep_bestandsbewertung.ascx"></telerik:RadTreeNode> 
                                                            </Nodes> 
                                                        </telerik:RadTreeNode> 
                                                        <telerik:RadTreeNode Text="Verkauf" Expanded="True" Checkable="False" ExpandMode="ClientSide"> 
                                                            <Nodes> 
                                                                <telerik:RadTreeNode runat="server" Text="Auslieferungsliste" Value="reports/rep_auslieferungsliste.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Auslieferungsübersicht" Value="reports/rep_ausluebersicht.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Auslieferungs Auswertungen" Value="reports/rep_ausliefer_auswertungen.ascx"></telerik:RadTreeNode> 
                                                                <telerik:RadTreeNode runat="server" Text="Verkauf nach Verkäufer" Value="reports/rep_auslverkaeufer.ascx"></telerik:RadTreeNode> 
                                                            </Nodes> 
                                                        </telerik:RadTreeNode> 
                                                    </Nodes> 
                                                </telerik:RadTreeView> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                     
                                </telerik:RadPanelItem> 
                            </Items> 
                            <CollapseAnimation Duration="100" Type="None" /> 
                            <ExpandAnimation Duration="100" Type="None" /> 
                        </telerik:RadPanelBar> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="splitpan_content" runat="server" Scrolling="None" style="width:auto;"> 
                <telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel1" Runat="server" height="75px" 
                    HorizontalAlign="Center" width="75px" MinDisplayTime="20" Transparency="30"> 
                    <img alt="wird aktualisiert" src="App_Themes/Aqua/GridView/Loading.gif" style="border: 0px;" /> 
                </telerik:RadAjaxLoadingPanel> 
                <asp:Panel ID="pan_content" runat="server" style="width:auto;margin:3px;"> 
                    </asp:Panel> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </telerik:RadAjaxPanel> 
    </div> 
    </form> 
</body> 
</html> 
 




It looks like:

screenshot

Can you understand my problem?
Thank you very much.

Regards
Reiner



1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 21 Jan 2009, 04:14 PM
Hello Reiner,

The mentioned scrollbar is not generated by the RadSplitter but by the browser. In order to remove it and let the splitter generate a scrollbar if such is needed, just set the overflow of the html, body and form elements to hidden.

In case you want to keep the browser's scrollbars you should take care to resize the splitter according to its content. This can be done by using client script in a manner, similar to the one demonstrated here.


Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Splitter
Asked by
Reiner
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or