I have noticed when using Infragistics controls like WebGrid and Listbar. If you move the web splitter over the controls to hide a portion of them then the controls overflow the container. If you place these controls is div tags and set their position to relative and overflow to auto they will not overflow the entire container but will still overflow on to the websplitterbar. And any divs that are scrollable enabled they have very weird functionality. I do have a web splitter nested within a web splitter but I am just have some really weird functionality with the web splitter control.
I had a similar problem. I placed the ultrawebgrid in one of the splitterpanes that I have in my webdialogwindow.
When I enclosed my grid in a div and table tag, the issue went away. Hope this helps.
height: 100%;">
<table runat="server" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td>
<igtbl:UltraWebGrid ID="UltraWebGrid1" OnPageIndexChanged="UltraWebGrid1_PageIndexChanged"
DisplayLayout-NoDataMessage="" OnSelectedRowsChange="UltraWebGrid1_SelectedRowsChange"
runat="server" OnInitializeLayout="UltraWebGrid1_InitializeLayout" Height="100%"
Width="100%">
<Bands>
<igtbl:UltraGridBand>
<AddNewRow View="NotSet" Visible="NotSet">
</AddNewRow>
<SelectedRowStyle BackColor="#CAD3E4" />
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout Name="ctl00xUltraWebGrid1" RowHeightDefault="20px" StationaryMarginsOutlookGroupBy="True"
Version="3.00" BorderCollapseDefault="Separate" ColWidthDefault="" RowSizingDefault="Free"
SelectTypeRowDefault="Single" NoDataMessage="" AllowColSizingDefault="Free" AllowSortingDefault="OnClient"
HeaderClickActionDefault="SortMulti" ScrollBar="Never" TableLayout="Fixed">
<ActivationObject BorderWidth="" BorderColor="168, 167, 191">
</ActivationObject>
<RowStyleDefault BorderColor="#A8A7BF" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana"
Font-Size="8pt" BackColor="Window">
<BorderDetails ColorLeft="Window" ColorTop="Window" />
<Padding Left="3px" />
</RowStyleDefault>
<FilterOptionsDefault DropDownRowCount="10" FilterUIType="HeaderIcons" AllowRowFiltering="OnServer">
<FilterHighlightRowStyle BackColor="#151C55" ForeColor="White">
</FilterHighlightRowStyle>
<FilterDropDownStyle BackColor="Lavender" BorderColor="Silver" BorderStyle="Solid"
BorderWidth="2px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px" Width="250px" TextOverflow="Ellipsis">
<Padding Left="2px" />
</FilterDropDownStyle>
<FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid"
BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"
Font-Size="11px">
</FilterOperandDropDownStyle>
</FilterOptionsDefault>
<HeaderStyleDefault BackColor="#E0E0E0" BorderStyle="Solid" ForeColor="Black" HorizontalAlign="Left">
<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />
</HeaderStyleDefault>
<FrameStyle BorderStyle="Solid" Font-Names="Verdana" Font-Size="8pt" Width="100%"
BorderWidth="0px" BackColor="#E0E0E0" Height="100%">
</FrameStyle>
<FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
</FooterStyleDefault>
<AddNewBox>
<BoxStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">
</BoxStyle>
</AddNewBox>
<SelectedRowStyleDefault BackColor="#B7B6CA">
</SelectedRowStyleDefault>
<EditCellStyleDefault BorderStyle="None" BorderWidth="0px">
</EditCellStyleDefault>
<Pager PagerAppearance="Top" PageSize="25" QuickPages="10" StyleMode="PrevNext" AllowPaging="True"
MinimumPagesForDisplay="2">
<PagerStyle BackColor="Gainsboro" BorderStyle="Solid" BorderWidth="1px">
<Padding Right="20px" />
</PagerStyle>
</Pager>
<RowSelectorStyleDefault Cursor="Default" Font-Underline="True">
</RowSelectorStyleDefault>
</DisplayLayout>
</igtbl:UltraWebGrid>
</td>
</tr>
</table>
</div>
I had a similar problem. The DIV and table didn't do much for my situation.
I added this style to a treeview control and it then worked
style="position:absolute;height:100%;width:100%;overflow:auto;"
The scrollbars and the controls inside the splitter pane would spill out over their parent until I set the position to absolute.
I have the same problem, and the most strange thing is that in most of the cases is with Infragistics controls, ANY RESPONSE FROM SOME DEVELOPER OR SUPPORT TEAM OF INFRAGISTICS??? I tested changing style: position to absolute, z-index, and nothing works, it's this a bug? Also I noticed that in firefox works fine, the bug is in IE. You can see the attached picture.
Thanks viktor,
After using the controls are fitting within the pane but i want the pane contents to shrik instead of verlapping...
That is while moving the Websplitter towards left pane the contents of it should shrink as its expanding while moving towards right pane..
Regards,
Wishnu
It worked with the relative position, why this is not detailed in the documentation of the control?
I have already reported this issue as a bug, and your support team was able to reproduce the problem. Now we are waiting for a hotfix or a workaround.
Hi,
Overlap or failure to scroll happens for control which use relative or absolute position. For example, UltraWebGrid, WebImageViewer and some others use relative position for its elements, so, application may even do not know where problem comes from until it look at generated htmls for those child controls. The WebSlider use only flow position and in order to support child controls with not-static positions, the application should set relative position for SplitterPane. Example:
<ig:splitterpane style='position:relative' ..>
Similar for any other container like ContentPane of WebDialogWindow.
To simplify that, most container controls (content panes of WebDialogWindow, WebSplitter, WARP, UltraWebTab) will have new propertybool EnableRelativeLayoutwhich was designed specifically for similar problems. If that property is enabled, then position:relative will be added automatically to content pane.