Grid expands outside of div container

[David]

My Grid expands outside my div container whenever I click Edit or Add New Record. How can I keep the grid inside the div? It doesn't look good when it goes outside the div. The div class name is WebpageManagementBox. The grid also has a class name of  webpageManagementGrid. I have attached a picture of what it looks like.

Here is the markup for the div and grid:

<div class="WebpageManagementBox">

       <br /><br />
       <asp:Label ID="lblRolePrompt" Text="Select Role to associate web pages:" CssClass="box_Labels" runat="server"></asp:Label>
       <br />
       <telerik:RadDropDownList ID="ddlRoles" runat="server" CssClass="wepageManagementDropDown" Width="200px" DataTextField="role" DataValueField="ID" AutoPostBack="true" OnItemSelected="ddlRoles_ItemSelected"></telerik:RadDropDownList>
       <br />
       <br />

       <telerik:RadGrid ID="RadGridwebpagemanagement" CssClass="webpageManagementGrid" MasterTableView-DataKeyNames="ID" runat="server"
           AllowFilteringByColumn="True" AllowSorting="True"
           GroupPanelPosition="Top"
           OnNeedDataSource="RadGridwebpagemanagement_NeedDataSource"
           OnUpdateCommand="RadGridwebpagemanagement_UpdateCommand" OnItemDataBound="RadGridwebpagemanagement_ItemDataBound" OnDeleteCommand="RadGridwebpagemanagement_DeleteCommand"
           OnInsertCommand="RadGridwebpagemanagement_InsertCommand" OnItemCommand="RadGridwebpagemanagement_ItemCommand" OnPreRender="RadGridwebpagemanagement_PreRender">
           <ClientSettings>
               <Scrolling AllowScroll="True" UseStaticHeaders="True" />
               <Selecting AllowRowSelect="true" />
           </ClientSettings>
           <GroupingSettings CaseSensitive="false" />
           <MasterTableView AutoGenerateColumns="false" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New Webpage"
                InsertItemPageIndexAction="ShowItemOnCurrentPage">

               <columns>

                   <telerik:GridBoundColumn DataField="webpage_name" HeaderText="Web Page" UniqueName="webpage_name" ItemStyle-Font-Names="Arial" ItemStyle-Font-Bold="true"
                               FilterControlWidth="200px">
                               <HeaderStyle Width="230px" Font-Names="Arial" />
                               <ItemStyle Width="230px" />
                   </telerik:GridBoundColumn>

                   <telerik:GridCheckBoxColumn DataField="add_privledge" HeaderText="Allow Adds" UniqueName="add_privledge"
                               FilterControlWidth="120px">
                               <HeaderStyle Width="120px" Font-Names="Arial" />
                               <ItemStyle Width="120px" />
                   </telerik:GridCheckBoxColumn>

                   <telerik:GridCheckBoxColumn DataField="edit_privledge" HeaderText="Allow Edits" UniqueName="edit_privledge"
                               FilterControlWidth="120px">
                               <HeaderStyle Width="120px" Font-Names="Arial" />
                               <ItemStyle Width="120px" />
                  </telerik:GridCheckBoxColumn>

                    <telerik:GridCheckBoxColumn DataField="delete_privledge" HeaderText="Allow Deletes" UniqueName="delete_privledge"
                             FilterControlWidth="120px">
                               <HeaderStyle Width="120px" Font-Names="Arial" />
                               <ItemStyle Width="120px" />
                   </telerik:GridCheckBoxColumn>

                  <telerik:GridEditCommandColumn ButtonType="LinkButton" EditText="Edit" CancelText="Cancel" ItemStyle-Width="50px" HeaderStyle-Width="50px" FilterControlWidth="50px" />
                  <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                       ConfirmTitle="Delete" ButtonType="LinkButton" Text="Delete" CommandName="Delete" ItemStyle-Width="50px" HeaderStyle-Width="50px" FilterControlWidth="50px" />

               </columns>

               <EditFormSettings EditFormType="Template">
               <FormTemplate>


                   <div id="divGridEdit" class="divGrid">
                           <b>Add New Role to Webpage Association</b>
                           <br /><br />
                           <table>

                               <tr>
                                   <td><asp:Label Text="Web Page:" runat="server"></asp:Label></td>
                                   <td>
                                      <asp:DropDownList ID="ddlWebPages" DataSourceID='sqlDataSourceWebpages'
                                              AppendDataBoundItems="True" DataTextField="webpage_name" DataValueField="ID"
                                              SelectedValue='<%# Bind("security_webpage_id") %>' runat="server">
                                     <asp:ListItem Text=" " Value=""></asp:ListItem>

                                        </asp:DropDownList>


                                   </td>
                               </tr>

                               <tr>
                                   <td><br /></td>
                                   <td></td>
                               </tr>
                               <tr>
                                    <td><asp:Label Text="Allow Add:" runat="server"></asp:Label></td>
                                    <td><uc1:CheckBoxNullableChecked ID="chkboxAllowAdd" Checked='<%# Bind("add_privledge") %>' runat="server" />
                                    </td>
                               </tr>
                               <tr>
                                    <td><asp:Label Text="Allow Edit:" runat="server"></asp:Label></td>
                                    <td><uc1:CheckBoxNullableChecked ID="chkboxAllowEdit" Checked='<%# Bind("edit_privledge") %>' runat="server" />
                                    </td>
                               </tr>
                               <tr>
                                    <td><asp:Label Text="Allow Delete:" runat="server"></asp:Label></td>
                                    <td><uc1:CheckBoxNullableChecked ID="chkboxAllowDelete" Checked='<%# Bind("delete_privledge") %>' runat="server" /></td>
                               </tr>

                               <tr>
                                   <td><asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                       CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'  runat="server" /></td>
                                   <td><asp:Button ID="btnCancel" Text="Cancel" runat="server" CommandName="Cancel" CausesValidation="false" /></td>
                               </tr>
                           </table>
                       </div>

               </FormTemplate>
           </EditFormSettings>


           </MasterTableView>
           <ClientSettings>
               <ClientEvents OnRowDblClick="rowDblClick" />
           </ClientSettings>

       </telerik:RadGrid>


   </div>

Here is the css for the div and the grid.

.WebpageManagementBox {


-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 10px 10px 5px #424542;

width: 48%;
height: 61%;
background-color: #BCC7D8;
background-color: #D6D3CE;
position:absolute;
top: 200px;
left: 440px;
padding-left: 20px;
opacity: 1.0;
margin: 0 auto;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #3145CE;

}
.webpageManagementGrid {
    position: absolute;
    top: 110px;
    left: 35px;
    width: 92%;
    font-family: Arial;
}

[Eyup]

Hello David,

This query was already addressed in your ticket with ID:907456. I will re-post the reply here so other developers with similar issues can see the solution:

The reason behind this issue are the Static headers. When the grid is switched to Static scrolling mode, its rendering layout is modified and while the Edit item is a part of the data section of the grid, the Insert item is now outside it.

Therefore, to resolve this problem, you will need to remove the UseStaticHeaders property or set a fixed height to the grid:

Copy Code

<telerik:RadGrid ... Height="300px">

Hope this helps.

Regards,
Eyup
Telerik