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

Problem Using Grid within DIVs

3 Answers 107 Views

Grid

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

RobDob asked on 09 Mar 2009, 10:31 PM

Hi,

I am trying to mke use of your Grid within a page that contains two divs, the first div has no sidth set on it, floats: left the seconond Div has a width preset and floats right. I am placing your grid within the first div, The grid displays put occupies the full width of the browser window and not only the width of the first div, minus the width of the second DIV that I want to foloat right.. Below is the ocde, could you please tell me what I'm doing wrong..

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="zzz-Default2.aspx.cs" Inherits="zzz_Default2" %> 
        
            <%@ 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>  
        
                <style type="text/css">  
        
                   #col_content  
        
            {  
        
                background-position: #F7F6F2;  
        
                padding: 0 0 0 10px;  
        
                border-left: 3px solid #DFDCCB;  
        
                background: #F7F6F2;  
        
                float: left;  
        
                width:auto;  
        
                height: auto;  
        
            }  
        
            #col_right  
        
            {  
        
                background-position: #F7F6F2;  
        
                padding: 0 0 0 10px;  
        
                border-right: 1px solid #CAC7B8;  
        
                border-left: 1px solid #CAC7B8;  
        
                background: #F7F6F2;  
        
                width: 200px;  
        
                float: right;  
        
                height: auto;  
        
            }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                <div> 
        
                <div id="col_content">Content <telerik:RadGrid ID="RadGrid1" runat="server"   
        
                        GridLines="None" AutoGenerateColumns="False"   
        
                        onneeddatasource="RadGrid1_NeedDataSource">  
        
            <HeaderContextMenu EnableTheming="True">  
        
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
            </HeaderContextMenu> 
        
            <MasterTableView> 
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
            </MasterTableView> 
        
            <FilterMenu EnableTheming="True">  
        
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
            </FilterMenu> 
        
                </telerik:RadGrid> 
        
                    <br /> 
        
                <br /> 
        
                <br /> 
        
                <br /><div align="center"></div> 
        
            &nbsp;  
        
            </div> 
        
            <div id="col_right" >Right</div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Thanks,

3 Answers, 1 is accepted

answered on 11 Mar 2009, 06:08 AM

Hi RobDob ,

I have one suggestion , try setting the first div width to 80% and fix the second width,here is the design, give a try and let me know how it goes.

    
                  <style type="text/css">     
        
                   #col_content     
        
            {     
        
                padding: 0 0 0 10px;     
        
                border-left: 3px solid #DFDCCB;     
        
                background: #F7F6F2;     
        
                float: left;     
        
                width:80%;     
        
                height: auto;     
        
            }     
        
            #col_right     
        
            {     
        
                background-position: #F7F6F2;     
        
                padding: 0 0 0 10px;     
        
                border-right: 1px solid #CAC7B8;     
        
                border-left: 1px solid #CAC7B8;     
        
                background: #F7F6F2;     
        
                width: 200px;     
        
                float: right;     
        
                height: auto;     
        
            }     
        
                </style>

aspx:

<%--palce the radgrid here--%>

    </div>
    <div id="col_right" >Right</div>
</div>

-shinu