Help! I have been stuck on this issue for a while.
I have a User Control with a WebChart (Pie Chart) on it. This works fine in FF and IE6 but not in IE7.
The first div is my container div for the User Control. This sits within a "WebParts" table of other User Control WebParts. This "WebParts" table then sits within a "ContentDiv" Div with a "overflow: scroll" style.
The problem is: When I scroll the "ContentDiv" the WebChart and WebGrids both stay in their position on the screen i.e. as if fixed absolutely to an x,y position from the base and not within the parent object.
Copying the generated code into an HTML file and then fiddling with it I have discovered the cause: The infragistic controls are adding position: relative style tags to the objects it generates. In the case of the WebChart this can be seen below (I've bolded the offending position styles).
I've tried various methods to get around this and still cannot find a solution, thus I need to know how can I turn these styles off?
<div align="center" style="height: 160px; width: 240px;"> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary" > <table id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_table" style="left:0px; top:0px; position: relative; z-index:4;"> <tr> <td style="left:0px; top:0px; width:240px; height:160px;" > <div style="left:0px; top:0px; position: relative; width:240px; height:160px;"> <img id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_BaseImage" src="ChartImages/PieChart_95.png?KxRx=0x07053" onmousemove="if(typeof(ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_BaseMove)!='undefined')ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_BaseMove(event)" style="width:240px; height:160px; z-index:0; border-width:0px;" usemap="#RxActImg_ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary" /> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_igWindowVuer" style="position:absolute; z-index:1;" > </div> <map onmousemove="if(typeof(ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv)!='undefined')ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv(event, this);" name="RxActImg_ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary" id="RxActImg_ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary"> <area onmouseout="if(typeof(ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv)!='undefined')ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv(event, this,2,0,'MOUSE_OUT','04');" coords="120,80,177,80,176,89,173,99,169,108,163,116,156,123,148,129,139,133,129,136,120,137,111,136,101,133,92,129,84,123,77,116,71,108,67,99,64,89,63,80,64,71,67,61,71,52,77,44,84,37,92,31,101,27,111,24,120,23,129,24,139,27,148,31,156,37,163,44,169,52,173,61,176,71,177,80" onmouseover="if(typeof(ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv)!='undefined')ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_pRcEv(event, this,2,0,'MOUSE_OVER','04');" shape="poly" /></map> </div> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_SB1_Location" style="position:absolute; z-index:2;" ></div> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_SB2_Location" style="position:absolute; z-index:2;" ></div> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_HairHorizontal" style="font-size:1px; height:1px; width:1px; Background-Color:Blue; VISIBILITY: hidden; POSITION: absolute; z-index:3; left=0px; top:0px;" ></div> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_HairVertical" style="font-size:1px; height:1px; width:1px; Background-Color:Blue; VISIBILITY: hidden; POSITION: absolute; z-index:3; left=0px; top:0px;" ></div> <div id="ctl00_TopLevelContentHolder_UltraWebTab1__ctl0_ctl01_WebPartManager3_gwpDashboardRiskMatrix1_DashboardRiskMatrix1_pieRiskMatrixSummary_IGTooltip" style="VISIBILITY: hidden; POSITION: absolute; z-index:4;">Tooltip</div> </td> </tr> </table> </div></div>
in javascript,
document.getElementById("ctl00_TopLevelContentHolder_...").style.position = "";
David Negley"] in javascript, document.getElementById("ctl00_TopLevelContentHolder_...").style.position = "";
This works for the table tag but not for the following Div - as this has no id associated with it this work around is not going to work. :(
I've changed the code so it works on any Infragistics controls.
Put the following into a functions.js or something like that, link it within your aspx page using a <script></script> tags.
Anything you're having issues with, whack a <div id="dvName"></div> tag around it. Then at the bottom add <script>IE7RelativeFix("dvName")</script>. Change dvName on each so it's unique. Be warned this removes all position tags, so don't whack a Div around your entire page as it will no doubt mess it up.
Relative is a bad idea with IE7 it seems.
function IE7RelativeFix(ClientID) { var div_el = document.getElementById(ClientID); div_el.style.position = ""; loopCount = 0; //alert(div_el.id); //Need to remove childnodes styles if (div_el.hasChildNodes()) { removeChildNodeStyles(div_el); }}function removeChildNodeStyles(CurrElement) { loopCount = loopCount + 1; for (var i = 0; i < CurrElement.childNodes.length; i = i + 1) { if (loopCount > 100) { break; } //Not all objects have a style attribute try { CurrElement.childNodes[i].style.position = ""; } catch (Error) { } if (CurrElement.childNodes[i].hasChildNodes()) { removeChildNodeStyles(CurrElement.childNodes[i]); } }}
Thanks a lot, it works greatly.
Hi,
I got the same problem. Could you guys tell me how to call this javascript function please?
Thanks
Regards,
Xiaosu
<div id="dvChartName"><your chart code></div>
Bottom of the page:
<script>IE7RelativeFix("dvChartName")</script>
Change the bolditalic bits to suit your code.
Thank you so much for your reply. But it does not work for me.
Once again, thanks a lot.
Nevermind. I was able to fix this. I am using jquery to strip all the position style attributes, I just added a .not(#xxx..._IGToolTip).css("position", ""); and the tooltips now display in the correct position.
I have implemented this solution, but one problem remains: my tooltips are showing up in lala land (nowhere near the chart). Any pointers with this problem? Thanks.