I have my ion footer with position:fixed and bottom:0, my ion footer is inside ion content.
My problem is that when the keyboard comes up on input, the element with the fixed position and bottom 0 stays down when it should go up with the keyboard, and it's weird because this only happens sometimes and not other times. And when my element is pushed up with the keyboard and the keyboard disappears, the element stays on top where I push it with the keyboard.
I think that when the keyboard appears the application does not realize that the height changes.
This problem only happens on ios, on android it works normal.
I leave you how is my code.
<ion-content [scrollEvents]="true">
<!-- Header -->
<app-header
title="Regístrate"
iconLeft="icon-close"
backDirection="login">
</app-header>
<!-- Form -->
<form
class="w-100 container-main"
[formGroup]="form"
(ngSubmit)="onSubmit()"
>
//content
</form> <!-- End Form -->
<!-- Footer -->
<ion-footer class="ion-no-border footer-ionic">
<ion-toolbar class="ion-no-padding">
<div class="text-center">
<ion-button expand="block" color="primary" shape="round" [disabled]="form.invalid" (click)="onSubmit()"
type="submit" style="margin: 0px;">Siguiente</ion-button>
</div>
</ion-toolbar>
</ion-footer>
</ion-content>
And the css of my footer:
ion-footer{
position: fixed;
bottom: 0;
z-index: 1000;
}
Photos in the emulator, the problem not is the emulator i test the app in and phone with ios and have the same problem:
Initial frame
Footer element stay up with the keyboard, is this ok
the problemn is the footer stay up when keyboard dissapear
I need my footer stays fixed in the bottom position when the keyboard appears I push my footer up
Related
I have implemented ngx-chips for an email CC field. It works perfectly in my Android phone using Chrome. But, in iPhone, the autosuggestion does not show up.
<div class="required form-group col-md-12 col-sm-12 col-xs-12" >
<label class="control-label" for="email.emailCc">CC:</label>
<tag-input [(ngModel)]="emailList" [onlyFromAutocomplete]="true" theme='bootstrap'>
<tag-input-dropdown [autocompleteObservable]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false">
</tag-input-dropdown>
</tag-input>
</div>
In Iphone
In Android
Please help.
Added following line in global.scss for IOS to show dropdown content,
div.ng2-dropdown-menu.ng2-dropdown-menu---width--4.ng2-dropdown-menu--open {
display: block !important; // to display the drop down content
max-height: 40vh !important; // for scrolling of suggestion list
}
But still it is not good as it is on android. Scrolling the screen scrolls the list with it.
We were facing the same issue. The problem is not data showing up, rather the placement of the dropdown due to the Zoom of textbox in IPhone. With css hacks we were able to place the drop down in proper position.
I am working on Ionic 3.X version and On my Home Page I have one search bar.
Issue : While click on SearchBar its opening Keyboard from bottom and my searchBar and whole screen goes UP side and user unable to view or scroll after click on searchBar
issue in OS : iOS
Same code works in Android
Screen Shots:
HTML Code for Search Bar :
<ion-content padding class="home-content-background-color">
<div *ngIf="headerTextShowFlag">
<div text-center>
<img [src]="appLogo" width="100" height="100">
</div>
<ion-label style="text-align: center" class="text-color">Welcome</ion-label>
<hr class="hr-style">
<ion-label text-wrap padding style="text-align: center" class="text-color">
Please Enter Service Request Number</ion-label>
</div>
<div>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list style="height: 58%; overflow-y: scroll; margin: 0px">
<ion-item *ngFor="let Case of CaseArrayFiltered" (click)="selectCaseFromList(Case)">
{{ Case }}
</ion-item>
</ion-list>
</div>
</ion-content>
Unable to show search bar on top its always moving out of screen at first load while click on search bar at first time.
Disable scroll solve my problem but after adding below line my keyboard show/hide not working properly.
this.keyboard.disableScroll(true);
After lots of R&D on above issue I found solution with some code patch in my .ts file
Need to disable keyboard scroll so that my screen will not go up automatically while keyboard will show.
platform.ready().then(() => {
this.keyboard.disableScroll(true);
});
Also need to update my flag in this.zone()
this.zone.run(() => {
self.toggleHeader = false;
});
Above line of code will execute on main thread and will update flag & UI so based on this my issue was resolved and hope this will helps others who also facing same issue specially in iOS platform.
Thanks.
Facing an issue in iPhone, creating a chatting web application. Having chat window on pop-up fixed position. when click on text input to send message, iPhone keyboard open it and shift the header part of chat section to top
Need to fix
Header and text-area should always be visible same as in whats-app
Set header-part to fixed position and same text-area on fixed, even keyboard is open or not
Prevent this shifting of header on top means prevent the iPhone scroll
Note: It is working fine in Android phone. Only issue with iPhone browsers, may be due to iPhone scroll.
Here is a simple conceptual example :
<article class="pop-up">
<h3>Title</h3>
<div class="content"> <p>Some scrollable content ...</p> </div>
<div> Some CTA buttons that should be visible for the user </div>
</section>
CSS:
.pop-up {
position: fixed;
// some other styles to display it as a popup
}
.content {
position: relative;
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}
I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
Problem: I have developed a basic web site using GoDaddy's Website Builder V7. See it here --> oktoberfestvisits.com . It is not iPad aware or optimized in any way since I have very little control over HTML, etc that is generated. All the pages appear to display properly, however, I have two problems I do not understand.
When trying to scroll quickly, ie. swiping down or up, the page only scrolls about 5 or so lines at a time. Is there something in the page that controls or prevents smooth scrolling (Momentum Scrolling)? All other web sites and web pages scroll fine.
When in the middle of the page, touching on the black title bar at the top of the screen does not snap back to the top of the page. Like above, is there something that controls or prevents this? Like above, all other web sites and web pages work fine.
I can make some minor HTML additions if necessary, but I do not know what causes this. Is there something that needs to be on my pages so that the iPad scrolls smoothly?
.sc {
-webkit-overflow-scrolling: touch;
}
Add this css code to style sheet and then add "sc" class on the page which that scroll issue. Like if you put finger on <input /> field and quickly scroll, but it doesnt scroll then put sc class on input field or add to its parent element.
e.g.
<div class="sc">
<div class="form-group sc">
<input type="text" placeholder="First Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Last Name"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Email"/>
</div>
<div class="form-group sc">
<input type="text" placeholder="Property Units"/>
</div>
</div>
The whole page is in a div with position: absolute;. I think this causes the scrolling error on iOS.
It appears that iOS has laggy scroll when you use overflow: hidden or overflow-x: hidden. Try to avoid that.