I am using Phonegap with JQuery-mobile, I have a popup with a lot of text in it, it scrolls fine on iOS, but when I test on various Android versions, the scroll just doesn't work. It seems the popup is not listening to the scrolling events.
Here is a example of my setup, not exactly the same because I am using Backbone view to handle the loading of everything, but the final html should be similar.
my code setup more or less is like
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div id="scrollable_div">
<div id="inner">
<ul>
.....
....
</ul>
</div>
</div>
</div>
<div data-role="footer">...</div>
</div>
<div id="popup_wrapper">popup is loaded into this div programmatically and called popup</div>
http://jsfiddle.net/VRwLX/
What if you try forcing a height to popup? Seems like Android is not being aware of the popup's size.
[data-role="popup"] {
position: relative; // the parent container probably needs a position context also.
height: 90%; //just not to block the full screen - it is a popup :)
overflow-y: scroll;
}
Worked on my JellyBean Android stock browser, should behave similarly on Phonegap's webview.
If the above doesn't work, delete the position: relative and replace the height by a 'real' value (pixels) instead of a relative value.
Related
Im building an App in Android and i have a div that have many divs inside, but when the amount of divs overflows the container size the screen does not scroll. I have tryed a lot of things:
- Overflow:auto and chidren with position:relative, doesnt work, not even a little.
- IScroll: It only works when i load it on the index.html and call it there. But the container im using is created later, when i go to another page, so when i call if from there it does not work at all.
- Other many CSS styles and properties and none worked.
Here is the divs hierarchy:
<div id="pageContent">
<div id="wrapper">
<div id="container" style="height: 100%; overflow:auto">
// HERE I LOAD THE PAGE
<div id="search" style="height: 100%">
</div>
<div id="mapHeader" class="resultsModeBar">
</div>
<div id="pharmacyResultsList" style="padding: 15px;">
<div id="pharmacyResultListHeader" class="rounded" style="background-color:#f0f0f1;margin: 0 auto;padding: 10px;margin-bottom: 10px;">
</div>
<div id="pharmacyResultListBody" class="rounded" style="border: 1px solid;border-color:#EA600A;margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. Thanks.
If this app is built as a webpage, you should be able to open it in an installed browser or using a WebView and have it scroll correctly.
Beyond that, I'm not entirely sure I understand what you're trying to do, but here are my thoughts:
If you want "HERE I LOAD THE PAGE" to stay in place, you can do it one of two ways. Either wrap the part you want static in a position: fixed span
<span style="position: fixed">// HERE I LOAD THE PAGE</span>
or you can put the text that you want scrollable into a ScrollBox! ScrollBoxes have defined widths and heights and will basically define a section of the page to be scrollable.
<div style="height:120px; width:120px; overflow:auto;">
<div id="pharmacyResultListBody" class="rounded" style="margin: 0 auto;">
// HERE ARE THE DIVS THAT I WANT TO SCROLL
</div>
</div>
Check it out live here.
I'm designing a page containing footer which contains long text box depending on the mobile device and a button adjacent to it, which will remain fix without considering the mobile device.
Following is the code:
<div data-role="footer" data-position="fixed"
data-theme="e" style="position: fixed;" class="ui-grid-a">
<div class="ui-block-a">
<input type="text" id="addComment" name="addComment" data-inline="true"></div>
<div class="ui-block-b">
</div>
</div>
Can we manipulate the ui-block-a width, to capture 80% of the width and remaining 20% only for the button??
Or is there some other possibility?
I want to make the appearance of the footer resembling as it is instagram while viewing comments or adding comments.
Use this
<div class="ui-block-a" style="width:80% !important">
jsFiddle
I'm testing a very simple page that swipes out the content within a phonegap app. I started with jquery mobile swipeleft and swiperight and it didn't work. So I switched over to dojo SwapView's and again, no luck. I stripped out all of content and when I only had text it worked great (for both jquery and dojo). As soon as I added any images both frameworks didn't recognize the swipe and wouldn't switch out the content. So I'm assuming it's a drawback to phonegap/cordova and images.
I thought maybe it was related to my css and positioning of the div's that the images were contained within. So i removed all css and again, the swipes weren't recognized and no content was swapped.
I searched the web and didn't see anyone else complaining about this issue. Anyone else run into this issue when adding images?
example with jquery:
<div data-role="page" id="page1">
<div data-role="content">
<p class="story">page1 content</p>
<div id="imagediv">
<img src="img/myimage.png" width="70%"/>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p class="story">content here
</p>
</div>
</div>
jquery swipe logic:
$(document).delegate('.ui-page', "swipeleft", function(){
var $nextPage = $(this).next('[data-role="page"]');
if ($nextPage.length > 0) {
$.mobile.changePage($nextPage, { transition: "slide" });
}
}).delegate('.ui-page', "swiperight", function(){
var $prevPage = $(this).prev('[data-role="page"]');
if ($prevPage .length > 0) {
$.mobile.changePage($prevPage, { transition: "slide", reverse : true });
}
});
Again, works just fine BEFORE I add images. Also works great in the browser (Chrome and Firefox). btw, i'm testing on android.
I think I figured out the issue... the image files were too large so it took too long for each page to be redrawn. By reducing the image sizes everything works as predicted. It's pretty annoying because I wanted to make an interactive app with animations but the animated gif files are too big for jquery to function. I wonder if this is a known limitation to phonegap apps.
I created one page using HTML5, Bootstrap, CSS and Angular JS specially for Mobile. I tried to keep one form with one input field and one button (for posting message on the page), at footer which is fixed using CSS -
position: fixed;
right: 0;
bottom: 0;
left: 0;
margin-bottom: 0;
and this rules are applied on form's wrapper div.
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="row">
<a class="pull-right switch-venue" target="blank" ng-href="#" href="#">
<img alt="Switch Venue" height="25px" src="images/swithc-venue.png">
</a>
<div class="span12 powered-by">
Powered by <img alt="" title="" width="70px" src="images/footer_logo.png">
</div>
</div>
</div>
</div>
But here the problem is when I tried to access the page (with web address URL) on my mobile device Samsung Galaxy Y ST5360, and when I try to input some text inside the input text box, android device's keyboard is appearing and behind this the whole footer area (having form with input field and button) is hiding.
While this is working fine on some other Android device Samsung Galaxy S III, it is working fine, means the footer area (with form inside it) is not hiding behind the device keyboard while typing inside input text field.
Sorry, if I couldn't give the more specification about the problem. Please help for this hair pulling problem.
Thanks in advence.
I started a simple jQuery Mobile Page with a header and a content div. The content div should serve as a map container for openlayers. The map should fill up the entire screen, except for the header bar.
Sizing the content div with a width/height of 100% didn't work (nothing was displayed), so I'm looking for a CSS approach to pixel-size the div or a relative-size workaround.
Especially I like to know:
How can I account for screen orientation changes (landscape/portrait)?
How can I make my layout "height-elastic", i.e. resistant to the toggling of the browser's address bar?
Here is my markup so far:
<body>
<div data-role="page">
<div data-role="header">
<h1>My Map</h1>
</div>
<div id="mapcontainer" data-role="content">
<!-- OpenLayers Map goes here -->
</div>
</div>
</body>
OpenLayers listens for the window 'resize' event and automatically calls map.updateSize(). Nothing to do here.
In my case, without header, the following code works:
<div data-role="page" id="map">
<div id="olmap"></div>
</div>
#olmap, #map {
height: 100%;
width: 100%;
}
Have you tried just setting the width setting for both the content div and it's containing div, which I guess in your case would be page? My experience on mobile browsers is that setting both height and width will cause problems when the phone is rotated. That's limited to the iPhone, granted.
I didn't test it yet, but see if this works:
set fulscreen mode as described here: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html
and set #mapcontainer width and height to 100% (and put some content in it when testing)