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

Radsplitter problem with CSS file and height 100%

1 Answer 143 Views

Splitter

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

Manel asked on 01 Mar 2009, 05:35 PM

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 Object, ByVal 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.

Radsplitter problem with CSS file and height 100%

1 Answer, 1 is accepted