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

Radsplitter problem with CSS file and height 100%

1 Answer 107 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Manel
Top achievements
Rank 1
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.

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 03 Mar 2009, 04:19 PM
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.
Tags
Splitter
Asked by
Manel
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or