I am working on the phonegap project.
I uses
codova version 3.5.0
jquery mobile version 1.2.1
I have made dialog box with back and ok button using data-role = dialog. It is working fine when content is small. But the dialog box is not scrolling when the content is long.
I have attached images of my problem.
I have set "DisallowOverscroll" to "true" in my config.xml file.
<preference name="DisallowOverscroll" value="true" />
I am not sure this problem is cordova related, your css should handle overflows. That popup is inside a webkit browser in principle right? Your index.html (or whatever main html is) may fit inside the screen but that web page or any popup inside it can have scrolling. In short, you can check for overflow-y and scrolling with css in general.
Related
I'm doing project in primefaces. In primefaces how content based panel has to fixed.
<p:panel>
........
</p:panel>
Css:
.ui-panel{width:-moz-fit-content}
It will work in mozila browser only. if any style will common support all browser or any other inbuild style in primefaces.
I need panel content based width fixed automatically and avoid unwanted space.
Am trying build a App using ionic frame work with angularJS which has lot of forms. when ever i open form page keyboard opens automatically. am using ionic keyboard. I have used
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
but no use.
please help me to stop keyboard opening automatically.
I solved the same issue by adding the below attribute to the button or element that opens the form.
data-tap-disabled="true"
eg:
<div data-tap-disabled="true" ng-click="openForm()"> Click here to open form </div>
More documentation can be found on the below link
Link Here
This happened to me when the click event was handled after the page trasitioned. See the GitHub issue I opened: https://github.com/driftyco/ionic/issues/3649
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I am using my webpage to show a pdf from App_Data.
I using this html:
<iframe src="" id="iframePDF" style="width:100%; height:93%;z-index:1;></iframe>
And javascript
$('#iframePDF').attr("src", responseData.TempPath + "#zoom=100&page=1");
The zoom isn't zooming the page and I cannot scroll.
Is there any workaround for this or a solution?
You might be able to scroll using two fingers, which is not intuitive for the user. You can not make the area scrollable unless you know the size of the content, which you can't, because iOS doesn't tell you.
Sorry, friend, but then you'd have to look into a native or hybrid app like the solutions offered by Cordova (PhoneGap). It doesn't matter if the file is in .NET App_Data or anywhere else online.
The reason why it works in your browser is because it has a built-in file viewer which is loaded when you open the file in a new window.
Wrap the iframe in a width-constrained element of some kind then apply this CSS to that element:
-webkit-overflow-scrolling: touch
I've a question.
I wrote a small app in Dreamweaver CS 5.5, to export it using Phonegap's SKD to an iOS app.
But the problem is: How can I prevent the user from moving the screen up and down when he slides with his fingers? I read on the Phonegap wiki that it is possible with DIV tags. But that won't work for me, because I use an index.html who reffers to frames. I don't use the the body. How can I prevent the user from slide the screen up and down?
index.html:
<html>
<frameset cols="625,*" border=0 framespacing=0 frameborder="0">
<frame src="frames/navbar.htm" scrolling=auto name="main">
<frame src="frames/blank.htm" scrolling=auto>
</frameset>
</frameset>
</frameset>
</html>
Have you checked out this helpful web page?
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
You may want to check out iScroll http://cubiq.org/iscroll if you want the content under it to be scrollable with momentum.
Also disabling "touchmove" events will prevent any kind of movement from the user.
document.addEventListener('touchmove',function(event){event.preventDefault()});
iOS 5 gave us support for fixed elements and -webkit-overflow-scrolling: touch; but those don't give the best effect and can sometimes not work as expected.