Hi,
I have a webgrid within a div. The div is set to use scrollbars on overflow and has a width of 600px.
The webgrid is wider than 600px and it's columns are automatically generated.
However, instead of apearing inside the div and letting me use the scrollbars to move over and back across it's length, it is appearing above/on top of the div as if it wasn't even inside the div. I can see the div scrollbar but of course because the webgrid is on the page at it's full width the scroll bar does nothing.
Does anyone know what could be causing this?
Thanks,
Colette
Colette,
What does your markup look like? It sounds like the grid's width is being set to a size larger than it's container. There was also a bug in the initial 2007 Volume 3 release which caused the grid to extend beyond it's container, though I'm not absolutely sure that's what's happening here.
Could you post your ASPX for the grid and it's container? If you have any external css, can you include that as well?
-Tony
Hi Tony,
I have no external css and here is the code of the aspx page.
There are actually 2 grids on the page both displaying the same behaviour. The contents of both grids are being set in the code behind file but in neither case is the width being specifically set as the columns are auto-generated based on the tables I'm binding to the webgrids.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridpage.aspx.cs" Inherits="gridpage" ValidateRequest="false" %><%@ Register Assembly="Infragistics2.WebUI.UltraWebGrid.v7.3, Version=7.3.20073.38, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %><!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>Instrument Lookup</title> <script type="text/javascript" src="webgrid.js"></script></head><body> <form id="form1" runat="server"> <div title="Underlyings"> <asp:Button ID="SubmitBtn" runat="server" Text="Save & Close" OnClick="SubmitBtn_Click" /><br /> <br /> Search<br /> <asp:Button ID="SelectAllBtn" runat="server" Text="Select All" OnClientClick="SelectAll('DBWebGrid')" CausesValidation="False" /> <br /> <div id="SearchDiv" style="overflow: scroll; width: 600px"> <igtbl:UltraWebGrid ID="DBWebGrid" runat="server"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> <Columns> <igtbl:TemplatedColumn Key="Select" Type="CheckBox" BaseColumnName="Select" AllowUpdate="Yes"> <HeaderTemplate> <input id="cbSelectAll" name="cbSelectAll" type="checkbox" onclick="SelectAll(0);" /> </HeaderTemplate> </igtbl:TemplatedColumn> </Columns> <RowEditTemplate> <br /> <p align="center"> <input id="igtbl_reOkBtn" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px" type="button" value="OK" /> <input id="igtbl_reCancelBtn" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px" type="button" value="Cancel" /></p> </RowEditTemplate> <RowTemplateStyle BackColor="#F3F3F6" BorderColor="#F3F3F6" BorderStyle="Ridge"> <BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" /> </RowTemplateStyle> </igtbl:UltraGridBand> </Bands> <DisplayLayout AllowAddNewDefault="Yes" AllowDeleteDefault="Yes" AllowSortingDefault="OnClient" AllowUpdateDefault="Yes" BorderCollapseDefault="Separate" Name="DBWebGrid" RowHeightDefault="20px" SelectTypeCellDefault="Extended" SelectTypeColDefault="Extended" SelectTypeRowDefault="Extended" StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="3.00" HeaderClickActionDefault="SortSingle"> <ActivationObject BorderColor="168, 167, 191" BorderWidth=""> </ActivationObject> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="#A8A7BF" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"> <BorderDetails ColorLeft="Window" ColorTop="Window" /> <Padding Left="3px" /> </RowStyleDefault> <FilterOptionsDefault> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> </FilterOptionsDefault> <ClientSideEvents BeforeClipboardOperation="PasteRows" DblClickHandler="HandleDblClick" KeyDownHandler="HandleKeyDown" AfterRowDeletedHandler="RowDeleted" CellClickHandler="HandleCellClick" /> <SelectedRowStyleDefault BackColor="#B7B6CA"> </SelectedRowStyleDefault> <HeaderStyleDefault BackColor="#CECDDB" BorderStyle="Solid" ForeColor="Black" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FrameStyle BackColor="#F3F3F6" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"> </FrameStyle> <Pager> <PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </PagerStyle> </Pager> <AddNewBox> <BoxStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </BoxStyle> </AddNewBox> </DisplayLayout> </igtbl:UltraWebGrid> </div> <asp:Button ID="CopyPasteBtn" runat="server" CausesValidation="False" OnClientClick="CopyMultipleRows('DBWebGrid')" Text="Copy selected to grid" /> <asp:Button ID="ClearBtn" runat="server" Text="Clear All" CausesValidation="False" OnClientClick="ClearGrid('DBWebGrid')" /> <asp:Button ID="SearchBtn" runat="server" Text="Search" OnClick="SearchBtn_Click" /><br /> <br /> <div id="InterviewDiv" style="overflow: scroll; width: 600px"> <igtbl:UltraWebGrid ID="InterviewWebGrid" runat="server"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout AllowAddNewDefault="Yes" AllowDeleteDefault="Yes" AllowSortingDefault="OnClient" AllowUpdateDefault="Yes" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" Name="InterviewWebGrid" RowHeightDefault="20px" SelectTypeCellDefault="Extended" SelectTypeColDefault="Extended" SelectTypeRowDefault="Extended" StationaryMarginsOutlookGroupBy="True" TableLayout="Fixed" Version="3.00"> <ActivationObject BorderColor="168, 167, 191" BorderWidth=""> </ActivationObject> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="#A8A7BF" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"> <BorderDetails ColorLeft="Window" ColorTop="Window" /> <Padding Left="3px" /> </RowStyleDefault> <FilterOptionsDefault> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> </FilterOptionsDefault> <ClientSideEvents BeforeClipboardOperation="PasteRows" KeyDownHandler="HandleKeyDown" CellClickHandler="HandleCellClick" AfterRowDeletedHandler="RowDeleted" /> <SelectedRowStyleDefault BackColor="#B7B6CA"> </SelectedRowStyleDefault> <HeaderStyleDefault BackColor="#CECDDB" BorderStyle="Solid" ForeColor="Black" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FrameStyle BackColor="#F3F3F6" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="8pt"> </FrameStyle> <Pager> <PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </PagerStyle> </Pager> <AddNewBox> <BoxStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </BoxStyle> </AddNewBox> </DisplayLayout> </igtbl:UltraWebGrid><br /> </div> </div> </form></body></html>
Spot on, thanks Tony.
Add a style="position:relative" to your div container. The grid has multiple elements that it positions within it's own div. Since they are given a position, their parenting container must have one as well to avoid rendering glitches like in this case.