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
205
Relative Scroll Issue - Scrolling within Div, Chart Stays at same position.
posted

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>

 

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?