I'm currently facing a strange problem:
I use Ionic 3 and ionic tabs like this:
<ion-tabs>
<ion-tab [root]="mapPage" tabTitle="Map" tabIcon="map"></ion-tab>
<ion-tab [root]="addPage" tabTitle="Hinzufügen" tabIcon="add"></ion-tab>
<ion-tab [root]="facebookPage" tabTitle="Facebook" tabIcon="logo-facebook"></ion-tab>
<ion-tab [root]="morePage" tabTitle="Mehr" tabIcon="more"></ion-tab>
</ion-tabs>
The icons are only visible when the Tab is selected, despite the facebook icon. I want that all icons are visible even if they are not selected.
It looks like this on my iOS/Android Device. With ionic cordova run browser it looks all good.
Does anybody else had this problem?
As #Suryan said, ionic will auto select platform, please refer attached image. If it didn't work please go with trail and error method.
Related
I have the following code in my html.
<ion-item (click)="showAddressModal()">
<ion-input [(ngModel)]="address.formattedAddress"
type="text" placeholder="Pick a location for your event">
</ion-input>
</ion-item>
showAddressModal() essentially opens a modal page where the user can search for an address.
Works like charm when I run it on chrome with ionic cordova run browser.
On ioS, however, it takes 2, sometimes 3 clicks to open the modal. First click brings the keyboard up. If I disable the keyboard by using [readonly]="true" on then the keyboard doesn't come up, but I still need 2 clicks. If I disable the entire input using [disabled], it doesn't serve my purpose - cannot click. I have tried moving the (click) from ion-item to ion-input, I have tried removing ion-item altogether, no avail!
Please share your perspective on how I can fix this.
Regards,
J
OK. For now, I've fixed my own problem by removing ion-input altogether and just using ion-text with a (click) listener on it. In lieu of the placeholder, I just show the same placeholder if address.formattedAddress is empty.
Still not sure where the problem is with ion-input and iOS, but will save that problem solving for another day.
For those of you, curious to see the new code, here's what the template code looks like - no change to my component or to the modal itself -
<ion-item (click)="showAddressModal()">
<ion-text inputmode="none">
{{ (address.formattedAddress == "") ? "Pick a location for your event" : address.formattedAddress}}
</ion-text>
</ion-item>
Thanks!
I'm trying to create a tabs bar at the top of my app, with no obvious header, but the iOS status bar is overlapping it. I've tried wrapping the ion-tabs tag in an ion-content tag that has padding but that didn't work. I wrapped the tabs in a header which fixed the padding issue, but then the pages loaded by the tab disappeared inside the header.
I've seen all the posts about headers being overlapped but those were years ago, that's been fixed in ion 4, and the solutions don't work for tabs anyways.
How can I solve this without removing the status bar?
iOS version: 11.4.1
ionic version: 4.0.5
Recreating:
Create the ionic tabs starter project
Change the tabs placement to top
Remove the header in home.html
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
After reading and playing with #Bilow's answer, I found it sufficient to simply add margin to the ion-tabs element as a whole, like so:
ion-tabs {
margin-top: var(--ion-safe-area-top);
}
This added space for the status bar on iOS. On Android, which was already behaving properly, nothing changed, so this fix works cross-platform.
It seems that tabs are just hard to work with. I found a work around by using segments. I'll just need to spend some time to stylize them to look right.
Here is my new app.html code:
<ion-header>
<h2></h2>
<ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
<ion-segment-button value="home">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button value="about">
<ion-icon name="information-circle"></ion-icon>
</ion-segment-button>
<ion-segment-button value="contacts">
<ion-icon name="contacts"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>
Having segments in the header worked for me, but in order to get the padding I needed I had to add an empty h2 tag. If there's a better way feel free to let me know, for now I'm happy with this.
For those of you that would like to do something similar I found the answer, posted by rapropos, here:
https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9
With just a little bit more effort you'll able to keep using the ion-tabs. This is what I've came up with:
Add to your global scss (or wherever needed)
global.scss
.plt-ios {
ion-tab-bar {
padding-top: var(--ion-safe-area-top);
}
ion-header ion-toolbar.noSafeAreaPaddingTop{
padding-top: 0 !important;
}
}
Add the 'noSafeAreaPaddingTop'-class to every tab page using the ion-toolbar
YourPageTemplate.html
<ion-header>
<ion-toolbar class='noSafeAreaPaddingTop'>
<ion-title>Tab page title</ion-title>
</ion-toolbar>
</ion-header>
...
I'm not verry happy with this method neither, but it works with ion-tabs..
A better solution was obvious:
<ion-header>
<h2></h2>
</ion-header>
<ion-content>
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
</ion-content>
I'm not sure why that took me so long to figure out...
in ionic login page , every time when i hide keyboard it will cause a full screen blank (element still there can be click and response) , and after editing input all recover normal. (Only iOS,android is fine,other page's input is fine so it should not be the keyboard plugin's problem)
Maybe this link help you. But it's temporary.
replace <ion-content> with <ion-scroll>
<ion-scroll direction="y" style="right: 0;bottom: 0;left: 0;position: absolute;" class="has-header has-subheader">
keyboard issue
You have to add this two attributes to ion-content padding="true" overflow-scroll="false"
<ion-content padding="true" overflow-scroll="false">
</ion-content>
It worked for me.
This is driving me completely crazy.
I can not get my app to hide the status bar on my iphone.
In my tiapp.xml I have
<fullscreen>true</fullscreen>
and
<key>UIStatusBarHidden</key><true/>
in my index.xml I have
<Alloy>
<Window class="container" fullscreen="true">
I still get a blank statusbar at the bottom of the screen on my iphone.
What do I miss ?
This is frustrating.
What you saw in http://s11.postimg.org/3rk17bib7/bottompart.png is not very clear because the app had a black background, but this is what was happening:
You were missing splash screens for the iPhone (6) you ran the app on, which triggers iOS to display the app in letterbox mode. So the black space under the label is the letterbox. Same will have been visible at the top of the screen.
Finally found the problem. It's pretty strange but it has to do with the images in app/assets/iphone. I previously deleted all the Alloy default images (all the ones starting with "Default"). I put the Alloy default images back and the problem disappeared.
Not sure I understand why but this fixed it.
You need to do some changes in code,
In Tiapp.xml
<fullscreen>false</fullscreen>
<navbar-hidden>true</navbar-hidden>
In index.xml
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
</Window>
In index.tss
".container": {
layout: "vertical",
navBarHidden: true,
backgroundColor:"white"
}
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Window-property-navBarHidden
This make navbar hidden in ios.
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