This problem occurs when the width of the browser screen gets reduced or is rendered on adisplay with a low resolution. Basically the horizontal scrollbar then correctly shows up, but incorrectly it sits on top of the last row in the grid. This obscures 80% of the last row and makes it basically unusable.
Here are the options we use:
this.Grid.EnableViewState = false; this.Grid.Width = Unit.Percentage(100); this.Grid.Height = Unit.Empty; Pager pager = this.Grid.DisplayLayout.Pager; pager.Alignment = PagerAlignment.Left; pager.AllowPaging = true; pager.MinimumPagesForDisplay = 2; pager.StyleMode = PagerStyleMode.CustomLabels;
this.Grid.DisplayLayout.CompactRendering = true; this.Grid.DisplayLayout.RowHeightDefault = Unit.Pixel(20); this.Grid.DisplayLayout.StationaryMargins = StationaryMargins.Header; this.Grid.DisplayLayout.HeaderStyleDefault.TextOverflow = TextOverflow.Ellipsis; this.Grid.DisplayLayout.RowStyleDefault.TextOverflow = TextOverflow.Ellipsis;
Here is the output:
<td class="CONTENT_CELL">
<span id="ctl00_CP_ContactDataGrid" class="_Undefined" wireupevent="ChangeBucket" currentpage="1" rowsperpage="10" sortascending="True" totalrows="0" rootselectedindex="-1" appliedcolumntemplates="ColumnTemplateType[ Array" style="display: inline-block; width: 100%;"><input id="ctl00_CP_ContactDataGridwGrid" name="ctl00xCPxContactDataGridwGrid" value="" type="hidden"><table id="ctl00xCPxContactDataGridwGrid_main" style="overflow: hidden; table-layout: fixed; position: relative; width: 100%;" class="ig_MetallicControl igtbl_MetallicControl ig_8aa43e53_r0" onresize="igtbl_onResize('ctl00xCPxContactDataGridwGrid');" onmousemove="igtbl_tableMouseMove(event,'ctl00xCPxContactDataGridwGrid');" onmouseup="igtbl_tableMouseUp(event,'ctl00xCPxContactDataGridwGrid');" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="overflow: hidden; width: 100%; vertical-align: top;" align="left"><div id="ctl00xCPxContactDataGridwGrid_hdiv" onscroll="igtbl_onStationaryMarginScroll(event, 'ctl00xCPxContactDataGridwGrid', 'ctl00xCPxContactDataGridwGrid_hdiv')" style="overflow: hidden; width: 100%; position: relative; height: 25px;"><table style="position: relative; border-collapse: collapse; table-layout: fixed; height: 100%; width: 1703px; left: 0px;" bandno="0" border="0" cellpadding="0" cellspacing="0" width="1"><colgroup><col width="22"><col width="19%"><col width="30%"><col width="25%"><col width="10%"><col width="6%"><col width="10%"></colgroup><thead class="ig_MetallicItem igtbl_MetallicItem ig_8aa43e53_r1 ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" onmousedown='igtbl_headerClickDown(event,"ctl00xCPxContactDataGridwGrid");' onmouseup='igtbl_headerClickUp(event,"ctl00xCPxContactDataGridwGrid");' onmouseout='igtbl_headerMouseOut(event,"ctl00xCPxContactDataGridwGrid");' onmousemove='igtbl_headerMouseMove(event,"ctl00xCPxContactDataGridwGrid");' onmouseover='igtbl_headerMouseOver(event,"ctl00xCPxContactDataGridwGrid");' oncontextmenu='igtbl_headerContextMenu(event,"ctl00xCPxContactDataGridwGrid");' ondblclick='igtbl_cellDblClick(event,"ctl00xCPxContactDataGridwGrid");'><tr><th width="22" height="20"><img src="App_Skins/Grid/Metallic/images/ig_tblBlank.gif" imgtype="blank" style="visibility: hidden;" border="0"></th><th id="ctl00xCPxContactDataGridwGrid_c_0_0" columnno="0" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Contact Name</nobr></th><th id="ctl00xCPxContactDataGridwGrid_c_0_1" columnno="1" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Address</nobr></th><th id="ctl00xCPxContactDataGridwGrid_c_0_2" columnno="2" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Description</nobr></th><th id="ctl00xCPxContactDataGridwGrid_c_0_3" columnno="3" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Phone No</nobr></th><th id="ctl00xCPxContactDataGridwGrid_c_0_4" columnno="4" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Ext</nobr></th><th id="ctl00xCPxContactDataGridwGrid_c_0_5" columnno="5" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"><nobr>Primary Contact</nobr></th></tr></thead></table></div></td></tr><tr id="ctl00xCPxContactDataGridwGrid_mr" style=""><td id="ctl00xCPxContactDataGridwGrid_mc" style="width: 100%; vertical-align: top;" align="left"><div id="ctl00xCPxContactDataGridwGrid_div" style="overflow: auto; width: 100%;" onscroll='igtbl_onScroll(event,"ctl00xCPxContactDataGridwGrid");' tabindexpage="0" hidefocus="true"><table id="G_ctl00xCPxContactDataGridwGrid" bandno="0" style="table-layout: fixed; border-collapse: collapse; width: 1703px; position: relative;" onselectstart="igtbl_selectStart(event,"ctl00xCPxContactDataGridwGrid");" onmousedown='igtbl_cellClickDown(event,"ctl00xCPxContactDataGridwGrid");' onmouseup='igtbl_cellClickUp(event,"ctl00xCPxContactDataGridwGrid");' oncontextmenu='igtbl_cellContextMenu(event,"ctl00xCPxContactDataGridwGrid");' onmousemove='igtbl_cellMouseMove(event,"ctl00xCPxContactDataGridwGrid");' onmouseover='igtbl_cellMouseOver(event,"ctl00xCPxContactDataGridwGrid");' onmouseout='igtbl_cellMouseOut(event,"ctl00xCPxContactDataGridwGrid");' ondblclick='igtbl_cellDblClick(event,"ctl00xCPxContactDataGridwGrid");' border="0" cellpadding="0" cellspacing="0" width="1"><colgroup><col width="22"><col width="19%"><col width="30%"><col width="25%"><col width="10%"><col width="6%"><col width="10%"></colgroup><thead class="ig_MetallicItem igtbl_MetallicItem ig_8aa43e53_r1 ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" style="display: none;" onmousedown='igtbl_headerClickDown(event,"ctl00xCPxContactDataGridwGrid");' onmouseup='igtbl_headerClickUp(event,"ctl00xCPxContactDataGridwGrid");' onmouseout='igtbl_headerMouseOut(event,"ctl00xCPxContactDataGridwGrid");' onmousemove='igtbl_headerMouseMove(event,"ctl00xCPxContactDataGridwGrid");' onmouseover='igtbl_headerMouseOver(event,"ctl00xCPxContactDataGridwGrid");' oncontextmenu='igtbl_headerContextMenu(event,"ctl00xCPxContactDataGridwGrid");'><tr><th height="20"><img src="App_Skins/Grid/Metallic/images/ig_tblBlank.gif" imgtype="blank" style="visibility: hidden;" border="0"></th><th id="ctl00xCPxContactDataGridwGrid_c_0_0" columnno="0" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th><th id="ctl00xCPxContactDataGridwGrid_c_0_1" columnno="1" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th><th id="ctl00xCPxContactDataGridwGrid_c_0_2" columnno="2" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th><th id="ctl00xCPxContactDataGridwGrid_c_0_3" columnno="3" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th><th id="ctl00xCPxContactDataGridwGrid_c_0_4" columnno="4" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th><th id="ctl00xCPxContactDataGridwGrid_c_0_5" columnno="5" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20"> </th></tr></thead><tbody style="height: 100%;" class="ig_MetallicItem igtbl_MetallicItem ig_8aa43e53_r1 ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4"><tr class="ig_MetallicSelected igtbl_MetallicSelected" id="ctl00xCPxContactDataGridwGrid_r_0" style="height: 20px;" selected="true"><th id="ctl00xCPxContactDataGridwGrid_l_0" class="igtbl_MetallicLabel" style="width: 22px; height: 20px;"><img imgtype="tri" src="App_Skins/Grid/Metallic/images/ig_tblTri.gif" border="0"></th><td class="igtbl_MetallicActiveBorderLeft igtbl_MetallicActiveBorderTopBottom" id="ctl00xCPxContactDataGridwGrid_rc_0_0" title="12222"><nobr title="">12222</nobr></td><td class="igtbl_MetallicActiveBorderTopBottom" id="ctl00xCPxContactDataGridwGrid_rc_0_1" title="CR19279, Edmonton"><nobr>CR19279, Edmonton</nobr></td><td class="igtbl_MetallicActiveBorderTopBottom" id="ctl00xCPxContactDataGridwGrid_rc_0_2"><nobr> </nobr></td><td class="igtbl_MetallicActiveBorderTopBottom" id="ctl00xCPxContactDataGridwGrid_rc_0_3" title="7807807800"><nobr>7807807800</nobr></td><td class="igtbl_MetallicActiveBorderTopBottom" id="ctl00xCPxContactDataGridwGrid_rc_0_4"><nobr> </nobr></td><td class="igtbl_MetallicActiveBorderTopBottom igtbl_MetallicActiveBorderRight" id="ctl00xCPxContactDataGridwGrid_rc_0_5" title="N"><nobr>N</nobr></td></tr></tbody></table></div></td></tr></tbody></table><div> <img src="App_Skins/Grid/Metallic/images/ig_tblPimgUp.gif" id="ctl00xCPxContactDataGridwGrid_pimgUp" style="overflow: hidden; position: absolute; left: 0px; top: 0px; display: none; z-index: 100000;" border="0" width="10" height="12"> <img src="App_Skins/Grid/Metallic/images/ig_tblPimgDn.gif" id="ctl00xCPxContactDataGridwGrid_pimgDn" style="overflow: hidden; position: absolute; left: 0px; top: 0px; display: none; z-index: 100000;" border="0" width="10" height="12"></div></span>
</td>
NOTE: This problem doesn't happen in firefox at all. In firefox the horizontal scrollbar correctly appears below the last row in the grid.
Thanks for your help
Hello,
Please attach a screen capture. There is an 'Options' tab near 'Compose' where you can attach a file.
Any solutions to this...I'm seeing this too
This behavior is controlled entirely by the browser. You'll see a similar result if you place an HTML table inside a DIV using Internet Explorer.