title: Intel App Framework scrolling not working
body: <p>I am working on an app using Intel App Framework and XDK, and I am having a lot of trouble getting scrolling to work properly outside of the emulator. I dont yet have an Apple developer license, so I can only test on iOS using App Preview</p>
  
  <p>The first problem is with full page panels. On Android builds and Android/iOS emulator, they scroll fine, but they dont scroll at all on iOS. HTML for panel:</p>
  
  <pre><code>&lt;div class="upage panel" id="uib_page_info" data-header="af-header-info" data-footer="none"&gt;
  &lt;div class="upage-outer"&gt;
  
      &lt;header class="container-group inner-element uib_w_2" data-uib="app_framework/header" data-ver="0" id="af-header-info"&gt;
          &lt;a id="backButton" href="javascript:;" class="button" &gt;Back&lt;/a&gt;
          &lt;h1&gt;Info&lt;/h1&gt;
          &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;
          &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;
          &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="uib_page_infosub" class="upage-content "&gt;
          &lt;div style="width:100%; "&gt;
              &lt;!-- text content here, long enough to need scrolling --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The second problem is with a div that occupies only part of the viewport, with the rest of the page not scrolling. In the emulator it works fine, and I got it to scroll once on Android, but have since been unable to, even on the same build. In the emulator, a scrollbar appears on the side and the mouse wheel works. HTML for panel:</p>
  
  <pre><code>&lt;div class="upage panel" id="uib_page_events" data-header="af-header-events" data-footer="none" data-load="DoCalendarLoad"&gt;
  &lt;div class="upage-outer" style="height:100%"&gt;
  
      &lt;header class="container-group inner-element uib_w_3" data-uib="app_framework/header" data-ver="0" id="af-header-events"&gt;
          &lt;a id="backButton" href="javascript:;" class="button" &gt;Back&lt;/a&gt;
          &lt;h1&gt;Event Calendar&lt;/h1&gt;
          &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;
          &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;
          &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="uib_page_eventssub" class="upage-content " style="width:100%; height:100%; background:#FFFF00"&gt;
          &lt;div id="eventsContent" style="width:100%; position:absolute; top:0px;"&gt; 
              &lt;input type="text" id="example" style="position:absolute;top:-40px;height:40px;width:100%;" gldp-id="calendarDiv"/&gt;
              &lt;div class="ratioCalendar" id="ratioOuter" style=" position:absolute; top:0px; width:100%; background:#FF0000"&gt;
                  &lt;div class="ratio_content" id="ratioInner" style="background:#00FF00" gldp-el="calendarDiv"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="ac-container" id="listDiv" style="position:absolute; width:100%; bottom:0px; background:#EFE7D0; margin:0px; overflow-y: scroll; overflow-x: hidden" scrolling="yes" &gt;
  
                  &lt;!-- several of the following, formatted as http://cssdeck.com/labs/5p3sqfwi --&gt;
                  &lt;div class="ac-container"&gt;
                      &lt;div&gt;
                          &lt;input id="ac-2" name="accordion-1" type="checkbox" /&gt; 
                          &lt;label for="ac-2"&gt;
                              &lt;span class="event_date"&gt;05.07.2013&lt;/span&gt; Title 
                          &lt;/label&gt;
                          &lt;article&gt;
                              &lt;!-- content --&gt;
                          &lt;/article&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What am I doing wrong in both of these instances?</p>