Hi,
I encountered a weired issue when enabling client-side scroll. When scroll was disabled, the generated image came as a whole piece without any issue. When scroll was enabled, the image was broken into 3 pieces: AxisX, AxisY, and PlotArea. That's when something weired happened. AxisX went to the top, and PlotArea moved to the bottom. Below is the HTML source. The 3 pieces' size and position look ok, but they are not in the position they are supposed to be. Also attached are screenshots for scroll enabled and disabled. Does anyone else see this before? What is the cause, and what is the work-around?
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><STYLE> /* Rule 183 of ../Styles/BaseStyles.css */ .pContent { COLOR: #003366; HEIGHT: 30px} /* Rule 7 of ../Styles/BaseStyles.css */ .pcC { VERTICAL-ALIGN: top; WIDTH: 100%} /* Rule 2 of ../Styles/BaseStyles.css */ .pcTable { } /* Rule 173 of ../Styles/BaseStyles.css */ .pbC { VERTICAL-ALIGN: top; BACKGROUND-COLOR: #ffffff} /* Rule 187 of ../Styles/BaseStyles.css */ .pbTable { } /* Rule 185 of ../Styles/BaseStyles.css */ .pAlign { VERTICAL-ALIGN: top} /* Rule 13 of ../Styles/Styles.css */ .pageView { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 3px; MARGIN-LEFT: 3px; MARGIN-RIGHT: 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: white} /* Rule 6 of ../Styles/Styles.css */ TD.tabBelow { BORDER-RIGHT: #828282 1px solid; BORDER-TOP: #828282 1px; BORDER-LEFT: #828282 1px solid; BORDER-BOTTOM: #828282 1px solid} /* Rule 8 of ../Styles/Styles.css */ .tabContainer { WIDTH: 900px} /* Rule 163 of ../Styles/BaseStyles.css */ .pBack { MARGIN: 0px; BACKGROUND-COLOR: #ffffff} /* Rule 1 of ../Styles/BaseStyles.css */ HTML { DIRECTION: ltr} </STYLE></HEAD><BODY class="pBack" id="Body1"><FORM id="Form1" name="Form1" action="ShowPATIENTPage.aspx?MRN=36FF483E74D7CDCED3F8F2672CD559F2&SessionId=DING12778" method="post"><TABLE height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD class="pAlign"><TABLE class="pbTable" cellSpacing="0" cellPadding="0" border="0"><TBODY><TR><TD class="pbC"><TABLE class="pcTable" cellSpacing="0" cellPadding="0" border="0"><TBODY><TR><TD class="pcC"><TABLE height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD><TABLE cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD class="pContent"><DIV id="PATIENTRecordControlUpdatePanel"><TABLE class="tabContainer" cellSpacing="0" cellPadding="0" border="0"><TBODY><TR><TD class="tabBelow" colSpan="2"><DIV id="MyMultiPage"><DIV class="pageView" id="Laboratory"><TABLE height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD class="pAlign"><TABLE class="pbTable" cellSpacing="0" cellPadding="0" border="0"><TBODY><TR><TD class="pbC"><TABLE class="pcTable" cellSpacing="0" cellPadding="0" border="0"><TBODY><TR><TD class="pcC"><TABLE height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD><TABLE cellSpacing="0" cellPadding="0" width="100%" border="0"><TBODY><TR><TD class="pContent"><DIV id="Laboratory_userControl_LabMultiPage"><DIV id="Laboratory_userControl_ChartPageView"><TABLE><TBODY><TR><TD width="902" colSpan="2"> |
| <DIV class="RadChart" id="Laboratory_userControl_LabRadChart" style="BACKGROUND: url(ChartImage.axd?UseSession=true&ChartID=a71b4274-aeed-4f16-b9d7-4d8c3ec71d4f_chart_Laboratory_userControl$LabRadChart&imageFormat=Png&random=0.255709821943059) no-repeat; WIDTH: 900px; HEIGHT: 500px"> |
| <DIV class="rchAxisX" style="LEFT: 45px; WIDTH: 837px; TOP: 460px; HEIGHT: 40px"> |
| <DIV id="Laboratory_userControl_LabRadChart_xAxis" style="BACKGROUND: url(ChartImage.axd?UseSession=true&ChartID=bf7f4b22-b3c8-41e1-827a-127ad8d932a2_chart_Laboratory_userControl$LabRadChart&imageFormat=Png&random=0.558874095584673) no-repeat; LEFT: 0px; WIDTH: 838px; HEIGHT: 40px"> |
| </DIV> |
| </DIV> |
| <DIV class="rchAxisY" style="LEFT: 0px; WIDTH: 46px; TOP: 50px; HEIGHT: 420px"> |
| <DIV id="Laboratory_userControl_LabRadChart_yAxis" style="BACKGROUND: no-repeat; WIDTH: 46px; TOP: 0px; HEIGHT: 420px"> |
| </DIV> |
| </DIV> |
| <DIV class="rchPlotArea rchXOnly" id="Laboratory_userControl_LabRadChart_rcPlotArea" style="LEFT: 46px; WIDTH: 837px; TOP: 60px; HEIGHT: 400px"> |
| <DIV class="rchImgWrap" id="Laboratory_userControl_LabRadChart_rchImgWrap" style="WIDTH: 837px; HEIGHT: 400px"> |
| <DIV id="Laboratory_userControl_LabRadChart_c_0_0" style="LEFT: 0px; WIDTH: 837px; TOP: 0px; HEIGHT: 400px"> |
| <IMG src="http://localhost:2067/WebApp/PATIENT/ChartImage.axd?UseSession=true&ChartID=f7e1ef94-64ca-400a-adb0-0b57614b30b3_chart_Laboratory_userControl$LabRadChart&imageFormat=Png&random=0.531652389341803" /> |
| </DIV> |
| </DIV> |
| </DIV> |
| <INPUT id="Laboratory_userControl_LabRadChart_ClientState" type="hidden" name="Laboratory_userControl_LabRadChart_ClientState" autocomplete="off" value="" /> |
| </DIV> |
| </TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM></BODY></HTML> |
2 Answers, 1 is accepted
0
dingjing
Top achievements
Rank 2
Rank 2
answered on 01 Jul 2010, 05:49 PM
I simplified the HTML source to leave the chart DIV only. I still got the weired layout.
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <HTML> |
| <BODY> |
| <DIV class="RadChart" id="Laboratory_userControl_LabRadChart" style="BACKGROUND-color:#eeeeee; WIDTH: 900px; HEIGHT: 500px"> |
| <DIV class="rchAxisX" style="LEFT: 45px; WIDTH: 837px; TOP: 460px; HEIGHT: 40px"> |
| <DIV id="Laboratory_userControl_LabRadChart_xAxis" style="BACKGROUND-color:yellow; LEFT: 0px; WIDTH: 838px; HEIGHT: 40px"> |
| x-axis |
| </DIV> |
| </DIV> |
| <DIV class="rchAxisY" style="LEFT: 0px; WIDTH: 46px; TOP: 50px; HEIGHT: 420px"> |
| <DIV id="Laboratory_userControl_LabRadChart_yAxis" style="BACKGROUND-color:cyan; WIDTH: 46px; TOP: 0px; HEIGHT: 420px"> |
| y-axis |
| </DIV> |
| </DIV> |
| <DIV class="rchPlotArea rchXOnly" id="Laboratory_userControl_LabRadChart_rcPlotArea" style="LEFT: 46px; WIDTH: 837px; TOP: 60px; HEIGHT: 400px"> |
| <DIV class="rchImgWrap" id="Laboratory_userControl_LabRadChart_rchImgWrap" style="WIDTH: 837px; HEIGHT: 400px"> |
| <DIV id="Laboratory_userControl_LabRadChart_c_0_0" style="BACKGROUND-color:pink;LEFT: 0px; WIDTH: 837px; TOP: 0px; HEIGHT: 400px"> |
| PlotArea |
| </DIV> |
| </DIV> |
| </DIV> |
| </DIV> |
| </BODY></HTML> |
0
dingjing
Top achievements
Rank 2
Rank 2
answered on 01 Jul 2010, 07:55 PM
I identified the cause, and found a quick-and-dirty work-around.
Cause:
The embedded chart css is not loaded. This is maybe because I put the chart in a UserControl, and the UserControl is loaded on-demand in a MultiPage.
Work-around:
I extracted the Telerik.Web.UI.Skins.Chart.css from Telerik.Web.UI.dll, put it into my project, and hard-coded the link from there.