I'm using Ionic FabButton for a floating button over the content in a fixed position. My code is:-
<ion-fab bottom right class="fab-image" (tap)="nextStep()">
<button ion-fab style="display: none;"></button>
<img src="assets/icon/custom/green_arrow.png" alt="">
</ion-fab>
My CSS fir this fab-image is as follows:-
.fab-image{
position: fixed !important;
width: 62px;
}
Now it's working on Android just fine:-
Click here to see how it's working on Android
And in iPhone it's working like this:
Click here to see how it working on iPhone
The problem is the glitch on iPhone. The fab button moves as the screen moves. Any ideas how to fix this issue?
I had the same problem on IOS, the fab wasn't fixed, here's my code.
<ion-content>
<!--other code-->
<ion-fab class="centered-fab" bottom>
<button ion-button block round color="primary" (click)="onClick()">
Click Me
</button>
</ion-fab>
</ion-content>
The issue is gone after I move outside of
<ion-content>
<!--other code-->
</ion-content>
<ion-fab class="centered-fab" bottom>
<button ion-button block round color="primary" (click)="onClick()">
Click Me
</button>
</ion-fab>
Related
I’m using IONIC 3.19.1.
<ion-content padding>
<ion-list>
<button ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</button>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p> are note rendering. Pls see the attachment.
Thanks.
You are putting the HTML inside a button with the ion-item attribute. Change it to just using the ion-item element and if you need click handling the you can use the binding.
Should look something like this:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let shift of shifts">
<h2>{{shift.operatorCode}}</h2>
<p>{{shift.date}}</p>
<button>hi</button>
</ion-item>
</ion-list>
<ion-fab right bottom>
<button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
When I minimize my Ionic app and open it after sometime, everything works except top left menu button and Android hardware back button.
I am unable to figure out the reason. I have to kill my app and reopen it then it works. Do I need to write any code or I need to do something else?
Below is my home.html header code:
<ion-header>
<ion-navbar color="headercolor" style="width:100%;">
<ion-title *ngIf="!toggled"><span style="color:orange;font-weight:bold;font-size:20px;">Dash</span><span style="color:#5990AE;font-weight:bold;font-size:20px;">board</span></ion-title>
<button ion-button menuToggle *ngIf="!toggled">
<ion-icon name="menu" class="icon" style="color: #ffffff;font-size:17px;"></ion-icon>
</button>
<ion-searchbar *ngIf="toggled" [showCancelButton]="true" [(ngModel)]="searchTerm" (ionCancel)="togglesearch()" (ionInput)="getItems($event)"></ion-searchbar>
<ion-buttons end *ngIf="!toggled">
<button ion-button icon-only (click)="togglesearch()">
<ion-icon name="search" class="icon" style="font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Added three icons on my ionic home.html using the below code. Problem is they are looking very dis-aligned and very small in size on IOS.
<ion-header>
<ion-navbar color="headercolor" style="height:25px;">
<ion-title style="text-align:center;font-size:11px;margin-top:20px;">Tags</ion-title>
<button ion-button (click)="back()" style="background-color:transparent;margin-top:-50px;">
<ion-icon name="arrow-back" class="icon" style="color: #ffffff;font-size:20px;"></ion-icon>
</button>
<ion-buttons end>
<button ion-button icon-only (click)="home()">
<ion-icon name="home" class="icon" style="font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="mailto()">
<ion-icon name="mail" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
<button ion-button icon-only (click)="msg()">
<ion-icon name="chatboxes" class="icon" style="color: #ffffff;font-size:17px;" ></ion-icon>
</button>
<button ion-button icon-only (click)="close()">
<ion-icon name="close" class="icon" style="color: #ffffff;font-size:16px;"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
What is the problem in my code and how can I fix this?
Below first screenshot is of Android and second screenshot is of iOS.
Android screenshot
iOS screenshot
this is the default icon for ios and android, so if you want to use same icon for both platform then use this: md-arrow-round-back
Now Android back button will be used for both platforms.
In the Android back button you can see a border. It can be removed by box-shadow:none.
For Alignment use <ion-row> -> all elements will be aligned
To increase the icon size use font-size property in the icon tag. The icon size will be increased too.
I want the ion-header with fixed position. When keyboard appears it also scroll up with the rest of the screen in iOS. How to make ion-header remain stick to the top while other part of a screen scroll up?
<ion-header no-border>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-header>
<ion-content id="home" class="background-Image" no-bounce>
<form [formGroup]="signup" novalidate>
<!-- User email -->
<div class="label">Wnat is your email?</div>
<div class="row">
<input class="input" autocorrect="off" type="email" placeholder="" formControlName="email" (input)="onEmailChange()" (blur)="onEmailSubmitted()" (keyup.enter)="hideKeyboard()">
<div class="validation-image">
<img [src]=validationImageEmail [hidden]=!validationImageEmail />
</div>
</div>
<hr class="underline">
</form>
</ion-content>
I think that the case is that your header lacks of a navbar or toolbar. By my experience both have the sabe result, but as the documentation says:
A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an ion-header or ion-footer, the toolbars stay fixed in their respective location. When placed within ion-content, toolbars will scroll with the content.
So update your code like this:
<ion-header no-border>
<ion-toolbar>
<button class="left-button" (click)="delete()" >
Delete
</button>
<button class="right-button" (click)="save()" >
Save
</button>
</ion-toolbar>
</ion-header>
Hope this helps.
Is there a simple way to make ion-cards swipe rather than stack vertically one above the other?
I currently have the cards stacking vertically using this code:
<ion-content class="outer-content speaker-list">
<ion-card *ngFor="#speaker of speakers" class="speaker">
<ion-card-header>
<ion-item>
<ion-avatar item-left>
<img [src]="speaker.profilePic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<button ion-item *ngFor="#session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</button>
<button ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</button>
</ion-list>
</ion-card-content>
<ion-item>
<button (click)="goToSpeakerTwitter(speaker)" clear item-left>
<ion-icon name="logo-twitter"></ion-icon>
Tweet
</button>
<button (click)="openSpeakerShare(speaker)" clear item-right>
<ion-icon name="share"></ion-icon>
Share
</button>
</ion-item>
</ion-card>
</ion-content>
I am looking for a simple way to get them to swipe rather than stack. There are various plugins that do Tinder like swiping cards but I was wondering if there is a setting that can be given to ion-card to make the cards do a simple swipe (I am not looking for the Tinder visual effect) like a carousel.
I am using ionic V2.