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

Vertical Dimension not resizing (at all)

4 Answers 426 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 24 Apr 2009, 05:44 PM
Can anyone please tell me why this master page does not resize in the vertical dimension.  I need for the RadPanel and all of the other Rad controls to resize properly.  This is the last hurdle before this page works properly for our simplistic needs.  I set all of the height properties to 100%.  I just don't know what else to do!

Thank you,

Ryan Kirby

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="IGM.master.cs" Inherits="SparqWare.MasterPage.IGM" %> 
<%@ 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 id="Head1" runat="server">  
    <title>Untitled Page</title> 
      
    <link href="../styles.css" rel="stylesheet" type="text/css" /> 
 
</head> 
<body > 
 
    <script type="text/javascript">     
    function panelMouseOver(sender, eventArgs)     
    {     
        if (eventArgs.get_item().get_text().indexOf("Folders") != -1 && blnDragging)     
        {     
            var multipage=$find('<%= RadMultiPage1.ClientID %>');     
            multipage.set_selectedIndex(eventArgs.get_item().get_index());     
        }  
    }  
      
    var blnDragging = false;  
    function OnClientItemClicking(sender, eventArgs) {  
        var multipage = $find('<%= RadMultiPage1.ClientID %>');  
        multipage.set_selectedIndex(eventArgs.get_item().get_index());  
    }      
    </script>    
      
    <form id="form2" runat="server">  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
      
      
    <table cellpadding="0" cellspacing="0">  
        <tr> 
            <td Width="290px" rowspan="3" style="border-top-style: solid; border-width: 1px; border-color: #666666; border-left-style: solid; border-width: 1px; border-color: #666666" > 
                <SFWeb:Image ID="imgCompany" runat="server" ImageUrl="~/Img/TeeMailer.png" /></td>  
            <td Width="500px" bgcolor="#8CBEFF" style="border-top-style: solid; border-width: 1px; border-color: #666666"></td> 
            <td Width="20%"   bgcolor="#8CBEFF" valign="top" 
                  
                style="border-right-style: solid; border-width: 1px; border-color: #666666; border-top-style: solid; border-width: 1px; border-color: #666666; padding-top: 1px; padding-right: 1px;">  
                <telerik:RadMenu ID="RadMenu1" Runat="server" Skin="Office2007" Width="180px">  
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Home">  
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Help">  
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Logout">  
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenu> 
            </td> 
        </tr> 
        <tr> 
            <td bgcolor="#8CBEFF"></td> 
            <td bgcolor="#8CBEFF" style="border-right-style: solid; border-width: 1px; border-color: #666666" width="20%"></td> 
        </tr> 
        <tr> 
            <td bgcolor="#8CBEFF"></td> 
            <td bgcolor="#8CBEFF" style="border-right-style: solid; border-width: 1px; border-color: #666666" width="20%"></td> 
        </tr> 
    </table> 
      
      
    <telerik:RadSplitter ID="RadSplitter1" runat="server"   
                         LiveResize="True"   
                         Width="100%"   
                         Height="100%">  
      
        <telerik:RadPane ID="RadPane1" runat="server" Width="200px" Height="100%" > 
 
 
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server"   
                                  SelectedIndex="0"   
                                  Height="100%"   
                                  Width="198px"   
                                  BackColor="White"   
                                  BorderColor="#6593cf"   
                                  BorderStyle="Solid"   
                                  BorderWidth="1px">     
 
                <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%">     
                    <div class="qsfexHeader">Favourite Folders</div>    
                </telerik:RadPageView>    
 
                <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%">     
                    <div class="qsfexHeader">All Mail Folders</div>    
                </telerik:RadPageView>    
 
                <telerik:RadPageView ID="RadPageView3" runat="server" Height="100%">     
                    <div class="qsfexHeader">Calendar</div>    
                </telerik:RadPageView>    
                  
                <telerik:RadPageView ID="RadPageView4" runat="server" Height="100%">     
                    <div class="qsfexHeader">Others</div>    
                </telerik:RadPageView>    
                  
            </telerik:RadMultiPage>    
              
 
            <telerik:RadPanelBar ID="RadPanelbar2" runat="server"   
                                 ExpandMode="SingleExpandedItem"   
                                 OnClientItemClicking="OnClientItemClicking"   
                                 OnClientMouseOver="panelMouseOver"   
                                 Skin="Office2007"   
                                 Width="200px" 
                                 Height="100%">     
                <Items>    
                    <telerik:RadPanelItem Text="Favourite Folders" Expanded="True" ></telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="All Mail Folders" ></telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="Calendar" ></telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="Others" ></telerik:RadPanelItem>    
                </Items>    
            </telerik:RadPanelBar>    
          
   
        </telerik:RadPane> 
          
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Height="100%"/>  
          
        <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="100%"  > 
          
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">     
                </asp:ContentPlaceHolder>   
      
        </telerik:RadPane> 
          
    </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 

4 Answers, 1 is accepted

Sort by
0
ManniAT
Top achievements
Rank 2
answered on 24 Apr 2009, 06:20 PM
Hi Rain,

just give your content a "frame" to live in :)
So after the script manager open a div like this:
<div style="float:none;position:absolute;top:0; left:0; bottom:35px; right:0;padding:0"> 
and close it a the very end of your masterpage directly before the closing form tag.
Of course this is rough and dirty - but setting some margins / paddings should give you the desired result.
And you (I guess) have to remove some of those Height: 100% - because now they have an effect.
Finally I have no idea how your PageViews will look (there is some CSS behind I don't know).

By the way - a few tips:
Some of your <xx Width="xxx" are not XHTML compliant - better use style="width:xxx" instead!
I also would use div's for the logo / menu line on top.

HTH

Manfred
0
Ryan
Top achievements
Rank 1
answered on 24 Apr 2009, 07:25 PM
Hi Manfred!

Thanks for the quick response but unfortunately it had no affect on the vertical resizing aspect of the problem ... any other ideas?

Thanks,

Ryan
0
ManniAT
Top achievements
Rank 2
answered on 24 Apr 2009, 07:46 PM
Hi,

here is exactly your page -- only two things changed:
a.) I replaced the "image control" with &nbsp; (since I don't have it)
b.) added the div I talked about

         
<%@ 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 id="Head1" runat="server">     
    <title>Untitled Page</title>    
         
    <link href="../styles.css" rel="stylesheet" type="text/css" />    
    
</head>    
<body >    
    
    <script type="text/javascript">  
        function panelMouseOver(sender, eventArgs) {  
            if (eventArgs.get_item().get_text().indexOf("Folders") != -1 && blnDragging) {  
                var multipage = $find('<%= RadMultiPage1.ClientID %>');  
                multipage.set_selectedIndex(eventArgs.get_item().get_index());  
            }  
        }  
 
        var blnDragging = false;  
        function OnClientItemClicking(sender, eventArgs) {  
            var multipage = $find('<%= RadMultiPage1.ClientID %>');  
            multipage.set_selectedIndex(eventArgs.get_item().get_index());  
        }         
    </script>       
         
    <form id="form2" runat="server">     
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>    
       <div style="float:none;position:absolute;top:0; left:0; bottom:35px; right:0;padding:0">  
         
    <table cellpadding="0" cellspacing="0">     
        <tr>    
            <td Width="290px" rowspan="3" style="border-top-style: solid; border-width: 1px; border-color: #666666; border-left-style: solid; border-width: 1px; border-color: #666666" >    
                &nbsp;</td>     
            <td Width="500px" bgcolor="#8CBEFF" style="border-top-style: solid; border-width: 1px; border-color: #666666"></td>    
            <td Width="20%"   bgcolor="#8CBEFF" valign="top"    
                     
                style="border-right-style: solid; border-width: 1px; border-color: #666666; border-top-style: solid; border-width: 1px; border-color: #666666; padding-top: 1px; padding-right: 1px;">     
                <telerik:RadMenu ID="RadMenu1" Runat="server" Skin="Office2007" Width="180px">     
                    <Items>    
                        <telerik:RadMenuItem runat="server" Text="Home">     
                        </telerik:RadMenuItem>    
                        <telerik:RadMenuItem runat="server" Text="Help">     
                        </telerik:RadMenuItem>    
                        <telerik:RadMenuItem runat="server" Text="Logout">     
                        </telerik:RadMenuItem>    
                    </Items>    
                </telerik:RadMenu>    
            </td>    
        </tr>    
        <tr>    
            <td bgcolor="#8CBEFF"></td>    
            <td bgcolor="#8CBEFF" style="border-right-style: solid; border-width: 1px; border-color: #666666" width="20%"></td>    
        </tr>    
        <tr>    
            <td bgcolor="#8CBEFF"></td>    
            <td bgcolor="#8CBEFF" style="border-right-style: solid; border-width: 1px; border-color: #666666" width="20%"></td>    
        </tr>    
    </table>    
         
         
    <telerik:RadSplitter ID="RadSplitter1" runat="server"      
                         LiveResize="True"      
                         Width="100%"      
                         Height="100%">     
         
        <telerik:RadPane ID="RadPane1" runat="server" Width="200px" Height="100%" >    
    
    
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server"      
                                  SelectedIndex="0"      
                                  Height="100%"      
                                  Width="198px"      
                                  BackColor="White"      
                                  BorderColor="#6593cf"      
                                  BorderStyle="Solid"      
                                  BorderWidth="1px">        
    
                <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%">        
                    <div class="qsfexHeader">Favourite Folders</div>       
                </telerik:RadPageView>       
    
                <telerik:RadPageView ID="RadPageView2" runat="server" Height="100%">        
                    <div class="qsfexHeader">All Mail Folders</div>       
                </telerik:RadPageView>       
    
                <telerik:RadPageView ID="RadPageView3" runat="server" Height="100%">        
                    <div class="qsfexHeader">Calendar</div>       
                </telerik:RadPageView>       
                     
                <telerik:RadPageView ID="RadPageView4" runat="server" Height="100%">        
                    <div class="qsfexHeader">Others</div>       
                </telerik:RadPageView>       
                     
            </telerik:RadMultiPage>       
                 
    
            <telerik:RadPanelBar ID="RadPanelbar2" runat="server"      
                                 ExpandMode="SingleExpandedItem"      
                                 OnClientItemClicking="OnClientItemClicking"      
                                 OnClientMouseOver="panelMouseOver"      
                                 Skin="Office2007"      
                                 Width="200px"    
                                 Height="100%">        
                <Items>       
                    <telerik:RadPanelItem Text="Favourite Folders" Expanded="True" ></telerik:RadPanelItem>       
                    <telerik:RadPanelItem Text="All Mail Folders" ></telerik:RadPanelItem>       
                    <telerik:RadPanelItem Text="Calendar" ></telerik:RadPanelItem>       
                    <telerik:RadPanelItem Text="Others" ></telerik:RadPanelItem>       
                </Items>       
            </telerik:RadPanelBar>       
             
      
        </telerik:RadPane>    
             
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Height="100%"/>     
             
        <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="100%"  >    
             
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
                </asp:ContentPlaceHolder>      
         
        </telerik:RadPane>    
             
    </telerik:RadSplitter>    
    </div> 
    </form>    
</body>    
</html>    
    
 
Than I added a context page with nothing more than the word "test" in it.
That's all.

One thing I would ask you to try -- change
 <link href="../styles.css" rel="stylesheet" type="text/css" />   
TO SOMETHING LIKE  
 <link href="../stylesXX.css" rel="stylesheet" type="text/css" />  
or remove the line temporarely - just to proof that your stylesheet does nothing ugly.
I tried the page in ID8 as well as in FF (current version) -- it fills the whole page - vert as well as hor
And if this does not work - use temporarely a minimized content page like this:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site2.Master" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="TestPMethods.WebForm5" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
test  
</asp:Content> 
 

Regards

Manfred
0
jian
Top achievements
Rank 1
answered on 27 Apr 2009, 05:56 PM
Hi, Ryan,
     I am not sure if your issue is solved or not. I have a very similar problem as yours. I am trying to make a page with the heard panel, and a split under it. The width of both of them are set, however, i would like to resize the height of the split controls when I resize the windows. I made the height as 100%, but when i resize the windows, nothing happens. Could anyone help me here?
Here is my master page:

 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Basic.master.cs" Inherits="QuarkDocMngWeb.MasterPages.Basic" %> 
<%@ 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"> 
 
<script type="text/javascript" language="javascript">  
    function OnClientLoaded(sender, args) {  
        sender.get_element().style.visibility = 'inherit';  
    }     
</script>    
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server">  
    <title>Quark Document Management Web</title> 
    <style type="text/css">    
    html, body, form    
    {    
        height: 100%;    
        margin: 0px;    
        padding: 0px;    
    }    
    </style>    
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">  
    </asp:ScriptManager> 
        <div class="main">      
        <asp:Panel ID="Panel1" runat="server" Height="110" Width="1035" Scrolling="None" BorderStyle="None">  
            <asp:contentplaceholder ID="HeaderContent" runat="server">  
                </asp:contentplaceholder> 
        </asp:Panel>   
        <telerik:radsplitter id="RadSplitter1" Orientation="Vertical" runat="server" EnableViewState="true" 
            PanesBorderSize="0" FullScreenMode="false" Width="1018" BorderStyle="None" BorderWidth="0"   
            BorderColor="White" BorderSize="0" Height="100%" HeightOffset="110" VisibleDuringInit="false" OnClientLoaded="OnClientLoaded">  
                <telerik:radpane id="LeftPane" runat="server" Height="100%" width="250" BackColor="#f8f7f5">  
                    <asp:contentplaceholder ID="LeftContent" runat="server">  
                    </asp:contentplaceholder> 
                </telerik:radpane> 
                    <telerik:radsplitbar id="RadSplitBar1" runat="server" collapsemode="Forward"></telerik:radsplitbar> 
                <telerik:radpane id="Radpane1" runat="server" Height="100%" width="768">  
                    <asp:contentplaceholder ID="MainContent" runat="server">  
                    </asp:contentplaceholder> 
                </telerik:radpane> 
        </telerik:radsplitter>     
       </div>        
    </form> 
</body> 
</html> 
and how can I attach a picture?

thanks
jian

 

 

 

 

 

 

 

 

 

 

 

Tags
Splitter
Asked by
Ryan
Top achievements
Rank 1
Answers by
ManniAT
Top achievements
Rank 2
Ryan
Top achievements
Rank 1
jian
Top achievements
Rank 1
Share this question
or