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

[Solved] Problem with Grid Width="100%" Height="100%"

4 Answers 407 Views

Grid

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

Scott asked on 23 Jun 2008, 01:47 AM

I have a grid that is nested inside a couple of RadSplitters (one horizontal, one vertical, like the outlook example).

I have finally managed to get the Width="100%" and Height="100%" to work .... kinda.

When the page first renders, everything is fine. When I resize the RadPane that contains the grid everything is fine. However, if I change the sort order on the grid, both a horizontal and vertical scroll bar appear (presumably on the RadPane). If I then resize the RadPane using the splitter bar then the scroll bars disappear. If I change the sort order again then scrollbars re-appear.

Incidentally, when I change the sort order the scroll bars don't appear until I move the mouse. For example, if I simply click the column header and wait for the page to refresh everything is fine, but once I move the mouse off the column header the scroll bars appear. It's bizarre.

Why would the grid change height when you sort it?

4 Answers, 1 is accepted

answered on 23 Jun 2008, 03:29 AM

I was trying to make a simple example and came up with what I think is probably the same problem, but I'm not sure. I don't know if this is a problem with the RadGrid or the RadSplitter, but here it is. Since the height/width on everything is "100%" I would think that there wouldn't be scroll bars anywhere.

    
            <%@ Page Language="C#" %> 
        
            <%@ 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">  
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadGrid for ASP.NET AJAX</title> 
        
            <style type="text/css">  
        
            html  
        
            {  
        
                overflow:auto;  
        
            }  
        
            html,  
        
            body,  
        
            form  
        
            {  
        
                margin:0;  
        
                height:100%;  
        
            }  
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" BorderSize="0" PanesBorderSize="0">  
        
                <telerik:RadPane ID="RadPane1" runat="server" Width="200" MinWidth="100">  
        
                </telerik:RadPane> 
        
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="0" /> 
        
                <telerik:RadPane ID="RadPane2" runat="server">  
        
                    <telerik:RadGrid  
        
                        ID="RadGrid1" 
        
                        runat="server" 
        
                        DataSourceID="XmlDataSource1" 
        
                        AllowPaging="true" 
        
                        AllowSorting="true" 
        
                        Skin="Vista" 
        
                        PageSize="40" 
        
                        Width="100%" 
        
                        Height="100%" 
        
                        style="border:0;outline:none" 
        
                        > 
        
                        <MasterTableView TableLayout="Fixed" /> 
        
                        <ClientSettings EnableRowHoverStyle="true">  
        
                            <Selecting AllowRowSelect="true" /> 
        
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                        </ClientSettings> 
        
                        <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                    </telerik:RadGrid> 
        
                </telerik:RadPane> 
        
            </telerik:RadSplitter> 
        
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" /> 
        
            </form> 
        
            </body> 
        
            </html>

This is taken from the example here: http://www.telerik.com/community/code-library/submission/b311D-keegm.aspx

I just wrapped the grid inside a RadSplitter. In my real project, I have another RadSplitter in the right-hand pane and the grid is inside an UpdatePanel. I just wanted to simplify to see if I could get to the root of the problem.

answered on 23 Jun 2008, 03:56 AM

Okay, that example can be solved by setting "overflow: hidden" on the "html" element.

Here's a better example that closely mirrors what I'm trying to do and shows pretty much exactly what my problem is.

    
            <%@ Page Language="C#" %> 
        
            <%@ 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">  
        
            <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
        
            <title>RadGrid for ASP.NET AJAX</title> 
        
            <style type="text/css">  
        
            html  
        
            {  
        
                overflow: hidden;  
        
            }  
        
            html,  
        
            body,  
        
            form  
        
            {  
        
                margin:0;  
        
                height:100%;  
        
            }  
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server">  
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" BorderSize="0" PanesBorderSize="0">  
        
                <telerik:RadPane ID="RadPane1" runat="server" Width="200" MinWidth="100">  
        
                </telerik:RadPane> 
        
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="0" /> 
        
                <telerik:RadPane ID="RadPane2" runat="server">  
        
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%" Height="100%">  
        
                        <telerik:RadPane ID="ListTitleRadPane" runat="server" Height="30px" CssClass="ContentAreaHeader">  
        
                            <div class="ButtonBarText" style="float: right;">  
        
                                <asp:CheckBox id="ShowHidePaid" runat="server" Text="Hide Paid Invoices" Checked="true" AutoPostBack="true" /> 
        
                            </div> 
        
                            <div><asp:Label id="ListTitle" runat="server" Text="Invoices" /></div>  
        
                        </telerik:RadPane> 
        
                        <telerik:RadPane ID="InvoiceListRadPane" runat="server">  
        
                            <telerik:RadGrid  
        
                                ID="RadGrid1" 
        
                                runat="server" 
        
                                DataSourceID="XmlDataSource1" 
        
                                AllowPaging="true" 
        
                                AllowSorting="true" 
        
                                Skin="Vista" 
        
                                PageSize="40" 
        
                                Width="100%" 
        
                                Height="100%" 
        
                                style="border:0;outline:none" 
        
                                > 
        
                                <MasterTableView TableLayout="Fixed" /> 
        
                                <ClientSettings EnableRowHoverStyle="true">  
        
                                    <Selecting AllowRowSelect="true" /> 
        
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                                </ClientSettings> 
        
                                <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                            </telerik:RadGrid> 
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </telerik:RadPane> 
        
            </telerik:RadSplitter> 
        
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" /> 
        
            </form> 
        
            </body> 
        
            </html>

Using IE7, put your cursor in the left pane and refresh the page (F5). Everything looks fine. Now mouse over the grid. Scroll bars appear. Resize the window or resize using the splitter bar - scroll bars disappear. Mouse over the grid again - scroll bars are back.

In Firefox there are always scroll bars.

answered on 24 Jun 2008, 08:14 AM

Hello Scott,

Please try modifying your code as follows and let us know if the problem persists:

    
            <style type="text/css">  
        
            html      
        
            {  
        
                overflow:hidden;  
        
            }  
        
            html, body, form  
        
            {  
        
                margin:0; height:100%;      
        
            }  
        
            </style> 
        
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" BorderSize="0" PanesBorderSize="0">     
        
                <telerik:RadPane ID="RadPane1" runat="server" Width="200" MinWidth="100">     
        
                </telerik:RadPane>    
        
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="0" />    
        
                <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">     
        
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%" Height="100%">     
        
                        <telerik:RadPane ID="ListTitleRadPane" runat="server" Height="30px" CssClass="ContentAreaHeader">     
        
                            <div class="ButtonBarText" style="float: right;">     
        
                                <asp:CheckBox id="ShowHidePaid" runat="server" Text="Hide Paid Invoices" Checked="true" AutoPostBack="true" />    
        
                            </div>    
        
                            <div><asp:Label id="ListTitle" runat="server" Text="Invoices" /></div>     
        
                        </telerik:RadPane>    
        
                        <telerik:RadPane ID="InvoiceListRadPane" runat="server">     
        
                            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" AllowPaging="true" 
        
                                PageSize="40" Width="100%" Height="100%" Style="border: 0; outline: none" AllowSorting="true">                      
        
                                <MasterTableView TableLayout="Fixed" /> 
        
                                <ClientSettings EnableRowHoverStyle="true">  
        
                                    <Selecting AllowRowSelect="true" /> 
        
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                                </ClientSettings> 
        
                                <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                            </telerik:RadGrid> 
        
                        </telerik:RadPane>    
        
                    </telerik:RadSplitter>    
        
                </telerik:RadPane>    
        
            </telerik:RadSplitter>

Let us know if this helps.

All the best,
Iana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center