https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081905#M61933 <P>Hi, thanks for your quick reply.</P> <P>You are right, scroll works ok with bootstrap. But I can't make a list item link to open a new page.</P> <P>Here is a project, created as Standar HTML5 only with Bootstrap as fw, what I did is:</P> <P>Drag and drop a list view into main page</P> <P>Added several individual list items</P> <P>Create a new page, add a header</P> <P>Link firs item action to open second page.</P> <P><SPAN style="font-size: 1em;">Thanks, regards</SPAN></P> <P><SPAN style="font-size: 1em;">Diego&nbsp;</SPAN></P> <P>&nbsp;</P> <P>&lt;!DOCTYPE html&gt;<BR /> &lt;html&gt;<BR /> &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * Please see the included README.md file for license terms and conditions.<BR /> &nbsp; --&gt;</P> <P>&nbsp; &nbsp; &lt;head&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset="UTF-8"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Blank App Designer Packaged Web App Project Template&lt;/title&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.<BR /> &nbsp; * Note that Windows device viewports work better when initialized using the @viewport CSS rule.<BR /> &nbsp; * For a quick overview of "meta viewport" and @viewport, see this article:<BR /> &nbsp; * &nbsp; <A href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag" target="_blank">http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag</A><BR /> &nbsp; * To see how it works, try your app on a real device with and without a "meta viewport" tag.<BR /> &nbsp; * Additional useful references include:<BR /> &nbsp; * &nbsp; <A href="http://www.quirksmode.org/mobile/viewports.html" target="_blank">http://www.quirksmode.org/mobile/viewports.html</A><BR /> &nbsp; * &nbsp; <A href="http://www.quirksmode.org/mobile/metaviewport/devices.html" target="_blank">http://www.quirksmode.org/mobile/metaviewport/devices.html</A><BR /> &nbsp; * &nbsp; <A href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" target="_blank">https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html</A><BR /> --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* following three (cascaded) are equivalent to above three meta viewport statements */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* see <A href="http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html" target="_blank">http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html</A> */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* see <A href="http://dev.w3.org/csswg/css-device-adapt/" target="_blank">http://dev.w3.org/csswg/css-device-adapt/</A> */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @viewport { user-zoom: fixed ; min-zoom: 100% ; }<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } &nbsp; @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" href="css/app.css"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"&gt;&lt;/script&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Recommended location for your JavaScript libraries --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- These library references (below) are just examples to give you the general idea... --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="lib/mc/hammer.js"&gt;&lt;/script&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="lib/ft/fastclick.js"&gt;&lt;/script&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"<BR /> &nbsp; * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?<BR /> &nbsp; * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.<BR /> &nbsp; * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.<BR /> --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="cordova.js" id="xdkJScordova_"&gt;&lt;/script&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="js/app.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- for your event code, see README and file comments for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="js/init-app.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- for your init code, see README and file comments for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="xdk/init-dev.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- normalizes device and document ready events, see file for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="lib/jquery.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="marginal/marginal-position.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="js/index_user_scripts.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="xdk/ad/bs_subpage.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &lt;/head&gt;</P> <P>&nbsp; &nbsp; &lt;body&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"&gt;&lt;/script&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage vertical-col left" id="mainpage"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="list-group widget uib_w_1 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_2" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_3" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_10 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_9 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_8 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_7 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_5 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_4" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage hidden" id="uib_page_1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage-outer"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="uib-header header-bg container-group inner-element uib_w_11" data-uib="layout/header" data-ver="0"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;New page&lt;/h2&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage-content ac0 content-area vertical-col left"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &lt;/body&gt;</P> <P>&lt;/html&gt;</P> Tue, 12 Jan 2016 11:49:59 GMT Diego_Calp 2016-01-12T11:49:59Z https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081903#M61931 <P><SPAN style="font-size: 1em;">Hi all, first post. I´m working with XDK from several months and think it's great.</SPAN></P> <P>&nbsp;</P> <P>XDK Version 2807, my problems are, if the listview items exceed the screen size, don`t scroll to last items.</P> <P>And items don't respond to clicks when are linked to show another page.</P> <P>Only on IOs, testing it with App Preview or as a web app uploades to server and opening it with Safari on IPhone. Tested with App Framework 3 and Bootstrap.</P> <P>Thanks, regards</P> <P>Diego</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> Mon, 11 Jan 2016 19:17:41 GMT https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081903#M61931 Diego_Calp 2016-01-11T19:17:41Z https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081904#M61932 <P>Please give more details on how you created the listview or share the index.html contents</P> <P>I was able to create a simple listview and scroll worked on iOS AppPreview, here is what I did, let me know how you are doing:</P> <OL> <LI>Create new project, select Bootstrap</LI> <LI>Drag ListView, it will create 3 list view items</LI> <LI>Drag and drop list view items to it, until there are enough to scroll</LI> <LI>Test on iOS App Preview and check for scroll</LI> </OL> <P>&nbsp;</P> Mon, 11 Jan 2016 21:08:12 GMT https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081904#M61932 Rakshith_K_Intel 2016-01-11T21:08:12Z https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081905#M61933 <P>Hi, thanks for your quick reply.</P> <P>You are right, scroll works ok with bootstrap. But I can't make a list item link to open a new page.</P> <P>Here is a project, created as Standar HTML5 only with Bootstrap as fw, what I did is:</P> <P>Drag and drop a list view into main page</P> <P>Added several individual list items</P> <P>Create a new page, add a header</P> <P>Link firs item action to open second page.</P> <P><SPAN style="font-size: 1em;">Thanks, regards</SPAN></P> <P><SPAN style="font-size: 1em;">Diego&nbsp;</SPAN></P> <P>&nbsp;</P> <P>&lt;!DOCTYPE html&gt;<BR /> &lt;html&gt;<BR /> &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * Please see the included README.md file for license terms and conditions.<BR /> &nbsp; --&gt;</P> <P>&nbsp; &nbsp; &lt;head&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset="UTF-8"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Blank App Designer Packaged Web App Project Template&lt;/title&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.<BR /> &nbsp; * Note that Windows device viewports work better when initialized using the @viewport CSS rule.<BR /> &nbsp; * For a quick overview of "meta viewport" and @viewport, see this article:<BR /> &nbsp; * &nbsp; <A href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag" target="_blank">http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag</A><BR /> &nbsp; * To see how it works, try your app on a real device with and without a "meta viewport" tag.<BR /> &nbsp; * Additional useful references include:<BR /> &nbsp; * &nbsp; <A href="http://www.quirksmode.org/mobile/viewports.html" target="_blank">http://www.quirksmode.org/mobile/viewports.html</A><BR /> &nbsp; * &nbsp; <A href="http://www.quirksmode.org/mobile/metaviewport/devices.html" target="_blank">http://www.quirksmode.org/mobile/metaviewport/devices.html</A><BR /> &nbsp; * &nbsp; <A href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" target="_blank">https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html</A><BR /> --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* following three (cascaded) are equivalent to above three meta viewport statements */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* see <A href="http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html" target="_blank">http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html</A> */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* see <A href="http://dev.w3.org/csswg/css-device-adapt/" target="_blank">http://dev.w3.org/csswg/css-device-adapt/</A> */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @viewport { user-zoom: fixed ; min-zoom: 100% ; }<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } &nbsp; @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" href="css/app.css"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"&gt;&lt;/script&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Recommended location for your JavaScript libraries --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- These library references (below) are just examples to give you the general idea... --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="lib/mc/hammer.js"&gt;&lt;/script&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="lib/ft/fastclick.js"&gt;&lt;/script&gt; --&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;!--<BR /> &nbsp; * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"<BR /> &nbsp; * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?<BR /> &nbsp; * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.<BR /> &nbsp; * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.<BR /> --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="cordova.js" id="xdkJScordova_"&gt;&lt;/script&gt;</P> <P>&nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="js/app.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- for your event code, see README and file comments for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="js/init-app.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- for your init code, see README and file comments for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="xdk/init-dev.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- normalizes device and document ready events, see file for details --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="lib/jquery.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="marginal/marginal-position.min.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="js/index_user_scripts.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;script type="application/javascript" src="xdk/ad/bs_subpage.js"&gt;&lt;/script&gt;<BR /> &nbsp; &nbsp; &lt;/head&gt;</P> <P>&nbsp; &nbsp; &lt;body&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- &lt;script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"&gt;&lt;/script&gt; --&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage vertical-col left" id="mainpage"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="list-group widget uib_w_1 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_2" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_3" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_10 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_9 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_8 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_7 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_5 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a class="list-group-item allow-badge widget uib_w_4" data-uib="twitter%20bootstrap/list_item" data-ver="1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4 class="list-group-item-heading"&gt;Heading&lt;/h4&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class="list-group-item-text"&gt;List item&lt;/p&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage hidden" id="uib_page_1"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage-outer"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="uib-header header-bg container-group inner-element uib_w_11" data-uib="layout/header" data-ver="0"&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;New page&lt;/h2&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container wrapping-col single-centered"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container content-area horiz-area wrapping-col left"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="widget-container content-area horiz-area wrapping-col right"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class="upage-content ac0 content-area vertical-col left"&gt;&lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<BR /> &nbsp; &nbsp; &lt;/body&gt;</P> <P>&lt;/html&gt;</P> Tue, 12 Jan 2016 11:49:59 GMT https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081905#M61933 Diego_Calp 2016-01-12T11:49:59Z https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081906#M61934 <P>Hmm. If you link a list item to a page using the Interactivity pane, then the href on the list item is supposed to be set for you. But I don't see it.&nbsp;</P> <P>The quick fix is to use the properties pane and set the href of the list item in question to &nbsp;<EM><STRONG> #</STRONG></EM> &nbsp; &nbsp;. &nbsp;Then it should start working.</P> Tue, 12 Jan 2016 16:55:07 GMT https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081906#M61934 Chris_P_Intel 2016-01-12T16:55:07Z https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081907#M61935 <P><SPAN style="font-size: 1em;">Hi Chris,</SPAN></P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>This sample project is working correctly on emulator and App Preview in Android devices. XDK is linking the item action through the click event in index_user_scripts.js file, here is de code snippet:</P> <P>&nbsp; &nbsp; /* listitem &nbsp;List item */<BR /> &nbsp; &nbsp; $(document).on("click", ".uib_w_2", function(evt)<BR /> &nbsp; &nbsp; {<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/*global activate_page */<BR /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;activate_page("#uib_page_1");&nbsp;<BR /> &nbsp; &nbsp; });<BR /> &nbsp; &nbsp;&nbsp;<BR /> &nbsp; &nbsp; }</P> <P>Your suggestion worked. Using the # link to pages from list items makes it work on App Emulator in my iPhone.</P> <P>I hope Intel solves the event issue, for example, I need to make some actions before show the new page, using the # complicates this.</P> <P>Thanks you all,</P> <P>Diego</P> Wed, 13 Jan 2016 10:34:07 GMT https://community.intel.com/t5/Software-Archive/Problems-with-listview-on-IOS/m-p/1081907#M61935 Diego_Calp 2016-01-13T10:34:07Z