- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi all, first post. I´m working with XDK from several months and think it's great.
XDK Version 2807, my problems are, if the listview items exceed the screen size, don`t scroll to last items.
And items don't respond to clicks when are linked to show another page.
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.
Thanks, regards
Diego
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Please give more details on how you created the listview or share the index.html contents
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:
- Create new project, select Bootstrap
- Drag ListView, it will create 3 list view items
- Drag and drop list view items to it, until there are enough to scroll
- Test on iOS App Preview and check for scroll
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi, thanks for your quick reply.
You are right, scroll works ok with bootstrap. But I can't make a list item link to open a new page.
Here is a project, created as Standar HTML5 only with Bootstrap as fw, what I did is:
Drag and drop a list view into main page
Added several individual list items
Create a new page, add a header
Link firs item action to open second page.
Thanks, regards
Diego
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<title>Blank App Designer Packaged Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!--
* The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
* Note that Windows device viewports work better when initialized using the @viewport CSS rule.
* For a quick overview of "meta viewport" and @viewport, see this article:
* http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
* To see how it works, try your app on a real device with and without a "meta viewport" tag.
* Additional useful references include:
* http://www.quirksmode.org/mobile/viewports.html
* http://www.quirksmode.org/mobile/metaviewport/devices.html
* https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
/* following three (cascaded) are equivalent to above three meta viewport statements */
/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
/* see http://dev.w3.org/csswg/css-device-adapt/ */
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
/*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<!-- Recommended location for your JavaScript libraries -->
<!-- These library references (below) are just examples to give you the general idea... -->
<!-- <script src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<!--
* cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
* Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
* The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
* You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.min.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/bs_subpage.js"></script>
</head>
<body>
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage">
<div class="list-group widget uib_w_1 d-margins" data-uib="twitter%20bootstrap/list_group" data-ver="1">
<a class="list-group-item allow-badge widget uib_w_2" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_3" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_10 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_9 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_8 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_7 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_5 d-margins" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
<a class="list-group-item allow-badge widget uib_w_4" data-uib="twitter%20bootstrap/list_item" data-ver="1">
<h4 class="list-group-item-heading">Heading</h4>
<p class="list-group-item-text">List item</p>
</a>
</div>
</div>
<div class="upage hidden" id="uib_page_1">
<div class="upage-outer">
<div class="uib-header header-bg container-group inner-element uib_w_11" data-uib="layout/header" data-ver="0">
<h2>New page</h2>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left"></div>
</div>
</div>
</body>
</html>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
The quick fix is to use the properties pane and set the href of the list item in question to # . Then it should start working.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Chris,
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:
/* listitem List item */
$(document).on("click", ".uib_w_2", function(evt)
{
/*global activate_page */
activate_page("#uib_page_1");
});
}
Your suggestion worked. Using the # link to pages from list items makes it work on App Emulator in my iPhone.
I hope Intel solves the event issue, for example, I need to make some actions before show the new page, using the # complicates this.
Thanks you all,
Diego
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page