Thursday, December 19, 2013

kendo dataviz + PhoneGap + Scrolling + Windows Phone 8

The Kendo chart graph whose content is longer than its container DIV does not have scrollbar in Windows Phone 8. In contrast, it works beautifully in iOS and Android.
 <div class="chart_container" >  
           <div class="report_chart_placeholder" ></div>  
      </div>  

The graph component is built on report_chart_placeholder. Its minimum height / height is set. Overflow properties are also set correctly for chart_container. However, no scrollbar appears when the chart is higher than chart_container. Solution :
   
           <div class="chart_container" >  
           <div class="report_chart_placeholder_overlay" ></div>  
           <div class="report_chart_placeholder" ></div>  
      </div>  

I needed to use absolute position to place on top of the chart another DIV (report_chart_placeholder_overlay) with same height properties of the chart. Then the scrollbar shows up properly.

No comments:

Post a Comment