Vertical Dimension not resizing (at all)

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    8 posts
    Member since:
    Jun 2008

    Posted 24 Apr 2009 Link to this post

    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> 
     
  2. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 24 Apr 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    8 posts
    Member since:
    Jun 2008

    Posted 24 Apr 2009 Link to this post

    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
  5. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 24 Apr 2009 Link to this post

    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
  6. jian
    jian avatar
    4 posts
    Member since:
    Mar 2009

    Posted 27 Apr 2009 Link to this post

    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

     

     

     

     

     

     

     

     

     

     

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017