I essentially copied this example to display LeafletJS maps with Ionic2. It works fine with ionic serve, but when I run on the device / simulator I keep getting a blank view.
I did not modify anything from the example. May it be some files are missing? One additional major hurdle is the fact that debugging TS files is extremely tedious.
The reason why the map was blank is that I had to wrap the map object into a div that derived the size from the ion-content.
Without the encapsulating div and with map on 100% only it wouldn't show properly on the device.
<ion-content>
<div style="height: 100%;width:100%;">
<div style="height: 100%;width:100%;" id="map"></div>
</div>
</ion-content>
Related
I am developing a Cordova application which previously used the JQuery mobile 1.4.5 script. A previous problem on Android, where transitioning from a page to another caused unnecessary flickering left me no choice but to remove the call to the JQuery mobile script.
<script src="js/jquery.mobile-1.4.5.js"></script>
Instead I simply left the CSS
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" />
and used the JQuery mobile classes to change the styles of inputs, buttons, etc, retaining the previous app style (this was highly important especially considering that the app is almost finished and the design in which jquery mobile was heavily used needed to be retained).
When I did this I found out that on iOS the scrolling was no longer fast and smooth as it was before. I tried to revert to the old method, i.e. having the j-query mobile script and the iOS smooth works normally. This proves that J-Query mobile had some specific script that 'fixes' the iOS scroll. I would like to use just this script to fix the scrolling problems. Apart from this problem, the app works and looks just fine.
Below is the 'template' html of every page. As you can see the jquery-mobile classes that are normally automatically wrapped around the components of the app after the page loads are manually assigned to the specific components.
<html class="ui-mobile js csstransitions">
<head>
</head>
<body class="ui-mobile-viewport ui-overlay-a sidy--panels-closed">
<div class="sidy ui-page ui-page-theme-a ui-page-active">
<nav>Menu</nav>
<nav>Search</nav>
<div class="sidy__content">
<div id="wrapper" class="wrapper">
<div>Fixed header</div>
<div>Container</div>
<div>Fixed Footer</div>
</div>
</div>
</div>
<script></script>
</body>
<html>
I tried to search intensively on stackoverflow and other sources. For e.g. this fix did not work when tried on the tag; as the fixed header and footer move with the scrolling and only restore to their original position when the scrolling operation is finished. When trying to assign the class on the container (where the actual scrolling needs to happen); nothing happens.
cssClass{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
What would be most useful to me is to know which part of the Jquery mobile script makes the iOS scrolling look smooth and native and act very fast!
Thank you for your help!
Your css'ed div needs for IOS (Safari) to have a non-dynamic size in the scroll direction, i.e. the height in your example.
Add a height element:
cssClass{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: ...px;
}
and it should work.
I had the same problem, and was able to solve it with this added property. I use React.JS so, I could easily get computed the height so that it was correct for different devices, adjusted for headers and footers etc. With Javascript you can do compute it with the variable window.innerHeight (at least for Cordova, I don't know if this is a standard browser variable).
I am using Framework7 for the first time in a Cordova iOS application and I really like the look of the UI but I have run into an issue where the page will not scroll vertically that I can not figure out. I have attempted to debug the code by replacing 'overflow:hidden' in places with 'overflow:auto' but that does not seem to resolve the issue.
Has anyone else run into this before? Any help wuold be greatly appreciated as I am really stumped on this one.
EDIT: I think I have narrowed down the issue to the overflow:hidden CSS attribute on the .view and .pages classes. If I remove that attribute the page scrolls, but now the header and footer are not attached to the top and bottom of the app.
I was able to figure out that the issue was caused by missing the page-content div. I added this div just after the data-page="index and it started to scroll.
Example:
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page"> /* this is what I was missing */
<div class="page-content">
/* content here */
</div>
</div>
</div>
I copied the google maps example out of the jquerymobile-docs. I need fixed toolbars (header and footer), but when I include the iframe-popup in the content, then the toolsbars are scrolling and jumping back on the right position. It works well in desktop browsers but not on iPhone 5.
This is the popup which causes the problems:
<div id="popupMap" class="popupMap" data-role="popup" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<iframe id="mapIframe" src="http://view.jquerymobile.com/1.3.2/dist/demos/widgets/popup/map.html" width="480" height="320"></iframe>
</div>
I've created a full demo: here
Please copy the code and run it on iPhone to see what I mean. Then remove the popup-code (iframe) and compare the results.
Is there a workaround for it?
I'm working on an iOS/PhoneGap project. I have a weird overlap issue in iOS (screenshot from iPad):
The "Select Status" popover is position: absolute, z-index: 35. The website link is doesn't have a position specified (so static) and no z-index specified.
It makes no matter if the address link is random text with no link, or a link (as captured), it still happens.
Here's what it looks like in Chrome (as expected) (taken on a retina Mac, so it's huge):
I have tried tweaking the z-indexes all day long in Safari's console on the iPad with no effect. It does not seem to be a "simple" z-index issue. So please don't just say "adjust z-index."
[edit] To be specific, I have tried setting the z-index of the popover to 5000 and the web address to -10 (giving it several different positions), and I have checked every ancestor of both elements to make sure none of them have z-indexes (and they didn't). I even tried giving a couple of the ancestors of the popover positions and z-indexes. Nothing ever changed. (And lest it is brought up, I did try changing colors and stuff, just to make sure my changes were making it to the page.)
Thanks.
So this has been plaguing our project for about a month, but I think I solved it. I haven't thoroughly tested the theory, but it has solved all of our issues so far.
If you remember way back in the days of IE7, there was a weird z-index bug, and the only way you could fix it was to find ancestors of the offending elements that were siblings and adjust their z-indexes.
For example, let's say this is my markup:
<div class="container">
<div class="header">
<button>
Click Me
<div class="dropdown">
<ul>
<li>This</li>
...
</ul>
</div>
</button>
</div>
<div class="content">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">www.example.com</div>
</div>
</div>
and like in my images, it looks correct in Chrome, but in iOS, www.example.com is above .dropdown.
Their ancestors that are siblings are .header and .content. If I adjust the z-index (while setting the position to relative, of course) of .header to be higher than .content, it fixed the issue.
Hope that makes sense and helps anything that might come to this page...
This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/
I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.
The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.
I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.
Sorry if this is all a bit confusing. I'll answer any questions that come up.
Here’s an HTML workaround effective in IE and Google Chrome.
Instead of marking your draggable elements up like so:
<div class="icon">
<a title="assets" href="[link]">
<img src="[image]" />
</a>
</div>
Mark them up like so:
<div
class="icon"
style="width: 90px; height: 90px; background: url('[image]')">
</div>
(You could, of course, separate the added CSS from the HTML.)