I posted this earlier also but did not get any solution. Here is my issue.I am having a webgrid on my page. There is a button on that page which when clicked opens a modal pop up with a search.On successfull search there is a button on my modal pop up which when clicked creates a new row in my webgrid and populatesthe grid with that search result. My problem is with the UI of the grid. When the number of rows in the grid become greater than the height of the grid, my grid starts moving upwards overlapping the controls above. Below is my grid html. I have tried setting the height, scroll, or even that of the table or having a div outside but no help.Any help is appreciated. Thanks.
<table width="32%" id="tbl1" > <tr> <td style="width:40%;position:relative"> <igtbl:UltraWebGrid ID="myGrid" EnableViewState="False" Browser="Xml" runat="server" Height="150px" Width="100%" Indentation="0" StyleSetPath="~/ig_res/" StyleSetName="IMC" EnableAppStyling="True"> <Bands> <igtbl:UltraGridColumn BaseColumnName="Name" IsBound="True" Key="Name" Width="160px"> <Header Caption="Name"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> <Footer> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="Protocol" IsBound="True" Key="Protocol" Width="120px"> <Header Caption="Protocol"> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Header> <Footer> <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo> </Footer> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="Type" IsBound="True" Key="type" Width="100px"> <Header Caption="Type"> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Header> <Footer> <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo> </Footer> </igtbl:UltraGridColumn> </Bands> <DisplayLayout OptimizeCSSClassNamesOutput="False" AllowAddNewDefault="Yes" AllowColSizingDefault="Free" AllowSortingDefault="OnClient" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" Name="xrecg" RowHeightDefault="20px" RowSelectorsDefault="No" SelectTypeRowDefault="Extended" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True" Version="4.00" ScrollBarView="Vertical" RowsRange="10" ViewType="OutlookGroupBy" ScrollBar="Auto" CellClickActionDefault="RowSelect"> <FilterOptionsDefault AllowRowFiltering="No" /> <SelectedRowStyleDefault CssClass="igtbl_IMCSelected"> </SelectedRowStyleDefault> <FrameStyle Height="150px" Width="100%" BackColor="#DDE7F4" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" CustomRules="display:inline;" TextOverflow="Ellipsis" > </FrameStyle> <HeaderStyleDefault Width="100%"> </HeaderStyleDefault> <GroupByBox Hidden="True"> </GroupByBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> </DisplayLayout> </igtbl:UltraWebGrid> </td> </tr></table>
See below howthe grid overlaps the controls above whenver a new row is added to it.
I solved it.
set the style of my table as:
style="position:relative;overflow:auto;:
and removed the height property of my grid and framestyle and it worked