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. :(
SOLVED!!!
Thanks for the initial pointer - got me thinking and I've got around it. NB: There's a limit of 100 loops in it - I added this just to speed it up a little and stop any infinite lopping.
<script type="text/javascript"> var table_el = document.getElementById("<%=ControlName.ClientID%>_table"); table_el.style.position = ""; var loopCount = 0; //Need to remove childnodes styles removeChildNodeStyles(table_el); function removeChildNodeStyles(CurrElement) { loopCount = loopCount + 1; for (var i = 0; i < CurrElement.childNodes.length; i = i + 1) { if (loopCount > 100) { break; } try { CurrElement.childNodes[i].style.position = ""; } catch (Error) { } if (CurrElement.childNodes[i].hasChildNodes) { removeChildNodeStyles(CurrElement.childNodes[i]); } } }</script>
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.
Thank you so much for your reply. But it does not work for me.
Once again, thanks a lot.
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.
Hi,
I got the same problem. Could you guys tell me how to call this javascript function please?
Thanks