Radsplitter problem with CSS file and height 100%

2 posts, 0 answers
  1. Manel
    Manel avatar
    1 posts
    Member since:
    Aug 2008

    Posted 01 Mar 2009 Link to this post

    I'm trying to create a full visible viewport if i put the Height="100%" Width="100%", style in a CSS file it don't works.

    My code:

    Escritorio.aspx
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Escritorio.aspx.vb" Inherits="mjnPyme.Desktop" %> 
     
    <%@ 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" > 
     
    <head runat="server"
        <title></title
        <link href="../Estilos/Mjn/Escritorio.css" rel="stylesheet" type="text/css" /> 
        <script src="Escritorio.js" type="text/javascript"></script> 
    </head> 
     
    <body scroll="no"
     
    <form id="form1" runat="server" > 
     
        <telerik:RadScriptManager id="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <telerik:RadSplitter id="RadSplitterEscritorio" runat="server" Orientation="Horizontal" > 
             
            <%--Parte superior del escritorio--%> 
            <telerik:RadPane id="RadPaneEscritorioSuperior" runat="server" Scrolling="None"  > 
                <telerik:RadSplitter id="RadSplitterEscritorioSuperior" runat="server" Orientation="Vertical"
                    <%--Parte superior izquiera del escritorio (logo) --%> 
                    <telerik:RadPane id="RadPaneEscritorioLogo" runat="server" Scrolling="None" > 
                        <asp:Image ID="ImagenLogoEscritorio" runat="server" /> 
                    </telerik:RadPane> 
                    <%--Parte superior derecha del escritorio (logo) --%> 
                    <telerik:RadPane id="RadPaneEscritorioMenu" runat="server" Scrolling="None" > 
                        <telerik:RadToolBar ID="RadToolBarEscritorioMenu" runat="server" Width="100%" Orientation="Horizontal" > 
                        </telerik:RadToolBar> 
                    </telerik:RadPane>                             
                </telerik:RadSplitter> 
            </telerik:RadPane> 
     
            <%--Separador horizontal del escritorio--%> 
            <telerik:RadSplitBar ID="RadSplitBarEscritorio" runat="server" CollapseMode="Forward" EnableResize="true" />     
     
            <%--Parte principal del escritorio--%> 
            <telerik:RadPane ID="RadPaneEscritorioInferior" runat="server" Width="100%" Scrolling="None" > 
            <p>mira que prueba</p> 
            </telerik:RadPane>         
     
        </telerik:RadSplitter>     
     
    </form> 
    </body> 
    </html> 
     

    Escritorio.aspx.vb
    Public Partial Class Desktop 
        Inherits System.Web.UI.Page 
     
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
            If Not IsPostBack Then 
                Page.Title = Trim(My.Settings.AplicacionNombre) & "Escritorio" 
                ' Aplicar Skins 
                RadSplitterEscritorio.Skin = My.Settings.AplicacionSkin 
                RadSplitterEscritorioSuperior.Skin = My.Settings.AplicacionSkin 
                RadToolBarEscritorioMenu.Skin = My.Settings.AplicacionSkin 
                ' Cargar imagen logo 
                ImagenLogoEscritorio.ImageUrl = "~/Core/Imagenes/Logos/" & My.Settings.AplicacionLogo 
                ImagenLogoEscritorio.Height = RadPaneEscritorioLogo.Height 
                ImagenLogoEscritorio.Width = RadPaneEscritorioLogo.Width 
            End If 
     
        End Sub 
     
    End Class 

    Escritorio.css
    html, body, form 
        height:100%; 
        width:100%; 
        margin:0px
        padding:0px
     
    #RadSplitterEscritorio 
        height:100%; 
        width:100%; 
     
     
    #RadSplitterEscritorioSuperior 
        height:100%; 
        width:100%;     
        border-style:none
     
    #RadPaneEscritorioSuperior 
        height:100px
     
    #RadPaneEscritorioLogo 
        height:100px
        width:150px
     
    #RadPaneEscritorioMenu 
        height:100px
     
    p  
        font-size:larger ; 
        font-style:italic ; 
     

    But, if i put all the "height" styles inside the .aspx tags it works fine.
    like this.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Escritorio.aspx.vb" Inherits="mjnPyme.Desktop" %> 
     
    <%@ 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" > 
     
    <head runat="server"
        <title></title
        <link href="../Estilos/Mjn/Escritorio.css" rel="stylesheet" type="text/css" /> 
        <script src="Escritorio.js" type="text/javascript"></script> 
    </head> 
     
    <body scroll="no"
     
    <form id="form1" runat="server" > 
     
        <telerik:RadScriptManager id="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <telerik:RadSplitter id="RadSplitterEscritorio" runat="server" Orientation="Horizontal" Height="100%" Width="100%"
             
            <%--Parte superior del escritorio--%> 
            <telerik:RadPane id="RadPaneEscritorioSuperior" runat="server" Scrolling="None" Height="100px" > 
                <telerik:RadSplitter id="RadSplitterEscritorioSuperior" runat="server" Orientation="Vertical" Height="100%" Width="100%"
                    <%--Parte superior izquiera del escritorio (logo) --%> 
                    <telerik:RadPane id="RadPaneEscritorioLogo" runat="server" Scrolling="None" Height="100px" Width="150px"
                        <asp:Image ID="ImagenLogoEscritorio" runat="server" /> 
                    </telerik:RadPane> 
                    <%--Parte superior derecha del escritorio (logo) --%> 
                    <telerik:RadPane id="RadPaneEscritorioMenu" runat="server" Scrolling="None" Height="100px"
                        <telerik:RadToolBar ID="RadToolBarEscritorioMenu" runat="server" Width="100%" Orientation="Horizontal" > 
                        </telerik:RadToolBar> 
                    </telerik:RadPane>                             
                </telerik:RadSplitter> 
            </telerik:RadPane> 
     
            <%--Separador horizontal del escritorio--%> 
            <telerik:RadSplitBar ID="RadSplitBarEscritorio" runat="server" CollapseMode="Forward" EnableResize="true" />     
     
            <%--Parte principal del escritorio--%> 
            <telerik:RadPane ID="RadPaneEscritorioInferior" runat="server" Width="100%" Scrolling="None" > 
            <p>mira que prueba</p> 
            </telerik:RadPane>         
     
        </telerik:RadSplitter>     
     
    </form> 
    </body> 
    </html> 
     

    what is the problem ?

    I just put the style config in a CSS file instead of inside ASPX tags

    Thanks.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 03 Mar 2009 Link to this post

    Hello Manel,
    There is more to the RadSplitter control than the HTML it renders. In order to configure it to occupy 100% of the width and height of your page and resize with that page, you have to use the Width and Height properties of the control, not the width and height CSS properties of its outermost element. That applies to the Width and Height of a RadPane as well.

    Regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top