I am trying to show ion-input at the bottom of page but It is getting hidden behind keyboard when keyboard visible after getting focus on same ion-input. Ionic page content is not getting scrolled up when keyboard visible. Kindly provide any solution.
Thanks!
I am facing same issue in my app and I apply below solution to show my input on top of the screen.
Use overflow property to scroll your content to top.
overflow-y: scroll;
Also if your app is in fullscreen mode you need to remove (file : config.xml) below line.
<preference name="fullscreen" value="true" />
still facing any problem you can refer this ionic thread in this thread lots of tricks and tips mentioned to overcome this issue.
Thread Link : https://forum.ionicframework.com/t/scroll-to-the-focused-item-input-when-the-keyboard-is-up/422/15
Hope this will helps!
Using Ionic-Native keyboard plugin, We can disable this setting.
this.keyboard.disableScroll(false);
Related
I noticed a small issue with trying to open a modal from within a popover. in iOS on both my iPhone 6S Plus as well as the emulators, when I open these modals, the DOM becomes non-responsive. Text areas refuse to be clicked into, buttons won’t run functions when tapped. Buttons in the <ion-navbar> will work. Text inputs or textareas in the <ion-navbar> WON’T work.
Then, of course, in my <ion-content>, nothing will work, buttons, text areas, anything with a (tap) or (click). Has anyone else had this issue?
I should note that when I’m trying to open the modal from a page or other component, it doesn’t have this issue, ONLY when opened from a popover. Is this a bug within Ionic or could I be doing something wrong? No error shows up in my console for any of this. I could post some of my code, but the code is pretty much identical between opening the modal from the popover vs opening the modal from a regular page or component.
Thanks in advance, this is really weird :D
Adding this to app.scss solved the problem in iOS. I haven't seen any issues arise from doing this:
.disable-scroll .ion-page {
pointer-events: auto;
}
My quick fix for this issue is similar to #StevieStar solution, but I applied it to the opener classes for both Popovers and modals as it can happen with either kind of window because they are all kept in the same modalStack
In your custom css file
.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }
This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.
I use Webview to load some url ,there is a input box in the webview .when I click the input box ,the soft keyboard conver the input box ,how can i do to solve
If you are saying that you are making an application for android and that the soft keyboard is covering an input box when you are testing your application and you would like to fix this issue, you should try the following:
android:windowSoftInputMode="adjustResize"
to the the tag in the manifest and to all your webviews/views. This should fix it and adjust the screen so that the input box isn't covered.
I had a similar issue and I remember looking up on SO and somebody was suggesting this fix and it worked for me. I don't remember the link to that fix :(
I've been struggling with this for several days. I have a very simple page in my mobile app with a textarea input and when I click on it the soft keyboard appears and scrolls the header of my page out of view. Is there a way to prevent this default scrolling?
Your is the default functionality of Phones, When user completes typing the screen automatically scroll backs, Kindly check it, If it works please reply.
Since google chrome updated to 11.0.696.60 some days ago, it cuts off the bottom of popup pages ... the status bar is displayed OUTSIDE the window at the bottom. Here is an example how it happens on the Facebook share popup, like shown in the screenshot:
On the left window the share and skip button disappear totally. The page seems to be larger than the window but resizing the windows does not uncover them. When you hover over a link, the status bar appears outside the chrome window ... strange! Maximizing the window or going into fullscreen mode shows the bottom. I detect this behavior on different popup pages on different systems ...
Is this a setting thing or a bug?!?
Since I code something with this fb share function (fb jsSDK)
ok, i found now there is a thread at the chromium forum regarding this issue:
here
Just managed to fixed this issue by reverting the theme back to the default.
options > personal stuff > themes > reset to default theme
For me the problem was occurring due to a zoom level exceeding 100%. Setting the zoom value to 100% fixed it.
So I have multiple textareas on my page that are editable depending on a users status. The problem is that even when a user clicks on a textarea that they are not allowed to edit, the keyboard comes up on mobile safari. The user can't actually edit the textarea, but it's really annoying/looks bad. I was thinking of maybe making it disabled but without actually changing it's look. Any suggestions?
Are you using TextView or TextField? For a TextView you can set Editable to NO to prevent the keyboard being popped up.
For TextField I guess you can set userInteractionEnabled to NO. Haven't tried this before though.
Have you tried disabling the input/textarea field? I think if you click on that the keyboard says closed.
<index disabled />
or
<textarea disabled />