Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Horizontal scrollbar obscuring last row in grid - Internet Explorer only
posted

 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,&quot;ctl00xCPxContactDataGridwGrid&quot;);" 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">&nbsp;</th><th id="ctl00xCPxContactDataGridwGrid_c_0_1" columnno="1" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20">&nbsp;</th><th id="ctl00xCPxContactDataGridwGrid_c_0_2" columnno="2" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20">&nbsp;</th><th id="ctl00xCPxContactDataGridwGrid_c_0_3" columnno="3" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20">&nbsp;</th><th id="ctl00xCPxContactDataGridwGrid_c_0_4" columnno="4" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20">&nbsp;</th><th id="ctl00xCPxContactDataGridwGrid_c_0_5" columnno="5" class="ig_MetallicHeader igtbl_MetallicHeader ig_8aa43e53_r4" height="20">&nbsp;</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>&nbsp;</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>&nbsp;</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