I have a major issue with apache cordova. This is an iOS-specific issue. I am using jQuery-mobile. The issue appears whenever one does a search on a listview control then my fixed position header, footer and search input moves down.
Here is the markup of my page.
<!DOCTYPE HTML>
<html>
<head>
<title>Contacts</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
<style>
#my-wrapper
{
padding-top: 81px;
background-color: rgb(250, 246, 246);
}
#my-wrapper form {
position: fixed;
left: 2%;
right :2%;
top: 35px;
width: 96%;
z-index: 2;
background-color: rgb(250, 246, 246);
border-color : rgb(120, 120, 120);
text-shadow:unset;
box-shadow:unset;
}
#ContactHeader
{
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
</style>
<div id="employeeListPage" data-role="page" >
<div id="ContactHeader" data-role="header" style="height:32px ; ">
<a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a>
<h2>Contacts</h2>
</div>
<div id="my-wrapper" data-role="main">
<ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll" data-filter-placeholder="Search Contacts/Companies" ></ul>
</div>
<div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/contactlist.js"></script>
</body>
</html>
I also have an event that fire when a user starts typing in the search bar
$(document).on("pagecreate", "#employeeListPage", function () {
$("#employeeList").on("filterablebeforefilter", function (e, data) {
var URL = window.localStorage.getItem("ContactsForSearch");
URL = URL + '/' + nextNo + '/' + value;
$.getJSON(URL, function (info) {
if (info.length === 0) {
nomoredata = true;
//alert('no more data to display');
$('#employeeList').append('<br>');
$('#employeeList').append('<center><h2>No Data <h2> </center>');
}
else {
$('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2> <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>');
}
});
});
});
Whenever you search from the top of the list:
If you are scrolling down and you start to type in the search bar , this happens...These screenshots were taken from xcode’s emulator , on the phone it has the same result except it has a keyboard popping up at the bottom:
This would solve the problem with scrolling headers:
if (window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
unfortunately it removes the "done" button too!!!
Related
I have installed Mathjax.2.7.5 and arabic-Mathjax from https://github.com/OmarIthawi/arabic-mathjax
I use them locally without server, without Internet-connection
i have modified the example "sample-signals.html" to get some arabic equation:
Arabic-Mathjax1
my code is:
!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
| This example shows how to use MathJax's signal mechanism to find out
| about what MathJax is doing, and to hook into various events as they
| occur.
-->
<link href='Amiri' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="D:/4-11-2019/MathJax-2.7.5/arabic/dist/arabic.css">
<script type="text/x-mathjax-config">
// Configure MathJax
//
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js", "D:/4-11-2019/MathJax-2.7.5/arabic/dist/unpacked/arabic.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
'HTML-CSS': {
undefinedFamily: 'Amiri'
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/noUndefined.js",
function () {MathJax.Hub.Startup.signal.Post("*** noUndefined Loaded ***")});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/TeX/AMSmath.js",
function () {MathJax.Hub.Startup.signal.Post("*** AMSmath Loaded ***")});
MathJax.Hub.Startup.signal.Post("*** In Startup Configuration code ***");
MathJax.Hub.Register.StartupHook("onLoad",function () {
Message("*** The onLoad handler has run, page is ready to process ***");
});
</script>
<!-- <script type="text/javascript" src="../MathJax.js"></script> -->
<script type="text/javascript" src="D:/4-11-2019/MathJax-2.7.5/MathJax.js"></script>
<style>
.output {
background-color: #F0F0F0;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px 1em;
}
</style>
</head>
<body>
<p>
$$\alwaysar{x=1}$$
</p>
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<p>\[E = mc^2\]</p>
<p>$$\ar{x=1}$$</p>
<p>$\ar{x=1}$</p>
<p>
Messages about mathematics:
<pre id="MathMessages" class="output">
</pre>
</p>
<p>
All Messages:
<pre id="AllMessages" class="output">
</pre>
</p>
<script>
(function () {
var math = document.getElementById("MathMessages");
var all = document.getElementById("AllMessages");
window.Message = function (message) {
MathJax.HTML.addText(all,message);
MathJax.HTML.addElement(all,"br");
};
MathJax.Hub.Register.MessageHook("New Math",function (message) {
var script = MathJax.Hub.getJaxFor(message[1]).SourceElement();
MathJax.HTML.addText(math,message.join(" ")+": '"+script.text+"'");
MathJax.HTML.addElement(math,"br");
});
MathJax.Hub.Startup.signal.Interest(function (message) {Message("Startup: "+message)});
MathJax.Hub.signal.Interest(function (message) {Message("Hub: "+message)});
Message("##### events above this have already occurred #####");
})();
</script>
</body>
</html>
Can anyone help me????
I have taken a working Leaflet map, but when I added a JQuery Mobile header and back button the formatting went crazy.
Initially loading the page all the contents is loaded in the upper-left-hand corner, but when the page is resized the smallest bit on a desktop, or rotated on a mobile, everything is fine.
This is what it looks like when opened:
and what it looks like after rotating (and what it should be):
Here is the code for the page
<!DOCTYPE html>
<html>
<head>
<title>Toronto CAD Activity Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/tfscad.mobile.css" />
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="../js/iframeResizer.contentWindow.js"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#mapPage {
height: calc(100% - 42px);
}
#map {
height: 100%;
}
#map-content{
height: 100%;
padding: 0px;
margin:0px;
z-index: -1;
}
#curLoc{
position: absolute;
bottom: 0;
left: 10px;
}
</style>
</head>
<body>
<body>
<div data-role="page" id="mapPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<a id="backButton" href="#" data-rel="back"
data-transition="slide" data-direction="reverse">Back</a>
<h1>Toronto CAD Map</h1>
</div>
<div id="map-content" data-role="content">
<div id="map"></div>
</div>
<a id="curLoc" data-role="button" data-icon="location" data-iconpos="notext"></a>
</div>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/leaflet.js"></script>
<script type="text/javascript">
window.onload = function() {
getGeoJson();
getTPSJson();
};
var map = L.map('map').setView([43.7178,-79.3762], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade',
}).addTo(map);
function getGeoJson(){
// load GeoJSON from an external file
$.getJSON("../appdata/geo.json",function(data){
L.geoJson(data ,{
pointToLayer: function(feature,latlng){
var TFS = new L.icon({
iconUrl: '../images/tfs_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
var TPS = new L.icon({
iconUrl: '../images/tps_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
var ESC = new L.icon({
iconUrl: '../images/tps_logo.png',
iconSize: [22, 22],
popupAnchor: [0, -22]
});
if(feature.properties.icon == 'TFS'){
var marker = L.marker(latlng,{icon: TFS});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}else if(feature.properties.icon == 'TPS'){
var marker = L.marker(latlng,{icon: TPS});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}else if(feature.properties.icon == 'ESC'){
var marker = L.marker(latlng,{icon: ESC});
marker.bindPopup('<strong>' + feature.properties.event_type + '</strong><br/>' + feature.properties.OPEN_DT);
return marker;
}
}
} ).addTo(map);
});
}
function getTPSJson(){
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0,
"offset": 1.5
};
// load GeoJSON from an external file
$.getJSON("../appdata/TPSDiv.json",function(myLines){
L.geoJson(myLines, {
style: myStyle
}).addTo(map);
})
}
setInterval(function()
{
getGeoJson();
}, 10000);//time in milliseconds
function onClick(e) {
//console.log(this.options.win_url);
window.open(this.options.win_url);
}
</script>
</body>
jQuery Mobile has its own way to create pages from div's, so you may better stick to JQM events.
Here is a great post of Omar which explain how to solve this (typical) issue when loading Google Maps. You should wait for pagecontainershow or use a placeholder to pre-load the maps in advance.
In my example below, you will find a variation of this approach for Leaflet which uses the same canvasHeight() function (see also the answers here: set content height 100% jquery mobile).
I noticed you are about to implement a footer button for the geo-location feature, so for your convenience i show you also a possible way to do that (credits: Getting current user location automatically every “x” seconds to put on Leaflet map?).
Please note: i had to reposition the default map attribution so it won't overlap with the footer button.
var map, actualPosition, actualAccuracy, autoUpdate;
function canvasHeight(canvas) {
var mapPage = $("#page-map"),
screen = $.mobile.getScreenHeight(),
header = $(".ui-header", mapPage).hasClass("ui-header-fixed") ? $(".ui-header", mapPage).outerHeight() - 1 : $(".ui-header", mapPage).outerHeight(),
footer = $(".ui-footer", mapPage).hasClass("ui-footer-fixed") ? $(".ui-footer", mapPage).outerHeight() - 1 : $(".ui-footer", mapPage).outerHeight(),
newHeight = screen - header - footer;
$(canvas).height(newHeight);
}
$(window).on("throttledresize orientationchange", function() {
canvasHeight("#map");
})
function onLocationFound(e) {
var radius = e.accuracy / 2;
actualPosition = L.marker(e.latlng).addTo(map);
actualAccuracy = L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
function showLocation() {
if (actualPosition) {
map.removeLayer(actualPosition);
map.removeLayer(actualAccuracy);
}
map.locate({setView: true,maxZoom: 16});
}
function loadMap(canvas) {
map = L.map(canvas).setView([43.7178, -79.3762], 11);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
// Your custom initialization
//getGeoJson();
//getTPSJson();
}
function toggleAutoUpdate() {
if (autoUpdate) {
$("#autoUpdate").removeClass("ui-btn-active");
clearInterval(autoUpdate);
autoUpdate = null;
if (actualPosition) {
map.removeLayer(actualPosition);
map.removeLayer(actualAccuracy);
}
} else {
$("#autoUpdate").addClass("ui-btn-active");
showLocation();
autoUpdate = setInterval(function() {
showLocation();
// Your custom Update
//getGeoJson();
}, 10 * 1000);
}
}
$(document).on("pagecontainershow", function(e, ui) {
if (ui.toPage.prop("id") == "page-map") {
canvasHeight("#map");
if (!map) {
loadMap("map");
}
}
});
#map {
margin: 0;
padding: 0;
}
#page-map .footer {
position: fixed;
z-index: 1000;
bottom: .1em;
width: 100%;
}
#footer-button {
width: 100%;
text-align: center;
background: transparent;
}
#map-attribution {
text-align: center;
background: rgba(255, 255, 255, 0.7);
}
.leaflet-control-attribution.leaflet-control {
display: none;
}
/* Don't show scrollbars on SO code snippet */
.ui-mobile .ui-page {
min-height: 100px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
</head>
<body>
<div data-role="page" id="page-map">
<div data-role="header" data-position="fixed" data-theme="a">
Back
<h1>Toronto CAD Map</h1>
</div>
<div id="map" data-role="content">
<div class="footer">
<div id="footer-button">
<button id="autoUpdate" onclick="toggleAutoUpdate();" class="ui-btn ui-btn-inline ui-corner-all ui-icon-location ui-btn-icon-notext"></button>
</div>
<div id="map-attribution">
Leaflet Map data © 2011 OpenStreetMap contributors, Imagery © 2012 CloudMade
</div>
</div>
</div>
</div>
</body>
</html>
jQuery Mobile manages the pages of your multi-pages document and resizes them appropriately when DOM is loaded.
The issue is that you have already instantiated your map with Leaflet before that event happens, so the map container (i.e. <div id="map"></div>) is not displayed yet by jQuery Mobile, and therefore its size is not computed yet by the browser.
This is a variant of map container size not being valid yet at map instantiation. See Data-toggle tab does not download Leaflet map
Since you already have a listener on window.onload, which executes after jQuery Mobile does its stuff, you could very simply call map.invalidateSize() at that moment:
window.onload = function() {
// Request Leaflet to re-evaluate the map container size
// AFTER jQuery Mobile displays the page.
map.invalidateSize();
getGeoJson();
getTPSJson();
};
Demo: https://plnkr.co/edit/TigW44s5MlqMifimWkSw?p=preview
What is I am trying to do ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
display-property="{{displayProperty}}"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
I am trying to bind display-property of ng-tagsinput to displayProperty model. It is working only first time. If I change the displayProperty, I am not seeing updates. How can I bind display-property so that whenever it changes, ng-tags-input to consider the change.
Another question -
How to use "text" attribute in ngTagsInput ?
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "name": "Brazil", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Brazil.png" },
{ "name": "Italy", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Italy.png" },
{ "name": "Spain", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Spain.png" },
{ "name": "Germany", flag: "http://mbenford.github.io/ngTagsInput/images/flags/Germany.png" },
];
});
.tag-template div:first-child {
float: left;
}
.tag-template div:first-child img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.tag-template div:last-child {
float: left;
margin-left: 5px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="displayProperty" ng-init="displayProperty='name'"/>
<tags-input ng-model="tags"
key-property="name"
display-property="flag"
placeholder="Add a country"
template="my-custom-template">
</tags-input>
{{displayProperty}}
<script type="text/ng-template" id="my-custom-template">
<div class="tag-template">
<div>
<img ng-src="{{data.flag}}" ng-if="data.flag"/>
</div>
<div>
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
</div>
</script>
</body>
</html>
How can I avoid embedding css files to output html files during pub build (generate js)? Is it possible?
note: polymer version is 0.10.0-pre.11
Before pub build:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<link rel="stylesheet" href="cc.css">
<link rel="import" href="packages/polymer/polymer.html">
<!-- import the click-counter -->
<link rel="import" href="clickcounter.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body>
</html>
After pub build:
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<!-- import the click-counter -->
</head>
<body><style>body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
</style>
<!--
These two files are from the Polymer project:
https://github.com/Polymer/platform/ and https://github.com/Polymer/polymer/.
You can replace platform.js and polymer.html with different versions if desired.
-->
<!-- minified for deployment: -->
<!-- unminfied for debugging:
<script src="../../packages/web_components/platform.concat.js"></script>
<script src="src/js/polymer/polymer.concat.js"></script>
<link rel="import" href="src/js/polymer/polymer-body.html">
-->
<!-- Teach dart2js about Shadow DOM polyfill objects. -->
<!-- Bootstrap the user application in a new isolate. -->
<!-- TODO(sigmund): replace boot.js by boot.dart (dartbug.com/18007)
<script type="application/dart">export "package:polymer/boot.dart";</script>
-->
<script src="packages/polymer/src/js/use_native_dartium_shadowdom.js"></script>
<!--<script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<!-- <link rel="import" href="../polymer-dev/polymer.html"> -->
<script src="packages/polymer/src/js/polymer/polymer.js"></script><polymer-element name="polymer-body" extends="body">
<script>
// upgrade polymer-body last so that it can contain other imported elements
document.addEventListener('polymer-ready', function() {
Polymer('polymer-body', Platform.mixin({
created: function() {
this.template = document.createElement('template');
var body = wrap(document).body;
var c$ = body.childNodes.array();
for (var i=0, c; (c=c$[i]); i++) {
if (c.localName !== 'script') {
this.template.content.appendChild(c);
}
}
// snarf up user defined model
window.model = this;
},
parseDeclaration: function(elementElement) {
this.lightFromTemplate(this.template);
}
}, window.model));
});
</script>
</polymer-element><script src="packages/web_components/dart_support.js"></script><script src="packages/polymer/boot.js"></script><polymer-element name="click-counter" attributes="count">
<template>
<style>
div {
font-size: 24pt;
text-align: center;
margin-top: 140px;
}
button {
font-size: 24pt;
margin-bottom: 20px;
}
</style>
<div>
<button on-click="{{increment}}">Click me</button><br>
<span>(click count: {{count}})</span>
</div>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
<script type="application/dart" src="cc.html.0.dart"></script><script src="packages/browser/dart.js"></script>
<h1>Cc</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<click-counter count="5"></click-counter>
</div>
</body></html>
As you can see the css file is embedded to html..
Work around for this issue is to add to every element #import ('mystle.css')
eg.
<my-element name="my-element">
<template>
<style>#import ('mystyle.css')</style>
...
</template>
<my-element>
credits go to John Messerly who invented the solution - see the thread here:
https://groups.google.com/a/dartlang.org/forum/?hl=en&fromgroups#!topic/web/8bjmkiRFhDk
Update
In Polymer.dart 0.12.1 an option was added to disable style inlining per file - see https://github.com/dart-lang/polymer-dart/blob/master/CHANGELOG.md#0121
transformers:
- polymer:
...
inline_stylesheets:
default: false
web/foo.css: true
packages/foo/bar.css: true
Original
There was an issue filed recently by a member of the Google PolymerDart team but it is not yet supported
https://code.google.com/p/dart/issues/detail?id=18597
I have a problem that the text inside the content-div is scrollable. Happens on iOS 6 with iPhone 4 and only if native title is set.
Video: http://www.youtube.com/watch?v=8ARaDQzBqOM
Demo:
<!DOCTYPE html>
<html>
<head>
<script>
forge.topbar.setTitle('Test App', function() {
forge.logging.log("Topbar image set");
}, function(e) {
forge.logging.log("Topbar image error: " + e);
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>this text is scrollable</p>
</div>
</div>
</body>
</html>
You might want to try to reset all the margins, paddings and border for all elements using CSS. Add this right before the closing </head>:
<style type="text/css">
* { /* reset */
margin: 0;
padding: 0;
border: 0;
}
</style>