I have fab-button as below and I want to disable it if form is not valid, but based on docs at http://ionicframework.com/docs/v2/api/components/fab/FabButton/ it seems fab-button doesn't have disabled property.
<ion-fab right bottom [disabled]="!profileForm.valid">
<button ion-fab color="primary"><ion-icon name="md-checkmark"></ion-icon></button>
</ion-fab>
You have to disable the button inside the ion-fab. This code works for me:
<ion-fab bottom right>
<button ion-fab [disabled]="!isValidInput()" (click)="add()">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-fab>
You did absolutely fine but sometimes some property is not applicable to some element.
So here you can't apply disabled directly on the ion-fab attribute.
So, just cut + paste disabled from ion-fab to button.
<ion-fab right bottom>
<button ion-fab color="primary" [disabled]="!profileForm.valid"><ion-icon name="md-checkmark"></ion-icon></button>
</ion-fab>
Related
Is there a way to force content behind a disabled button, that is transparent?
Here is the code:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
I'm not quite sure to understand what you want to do here, but if you want to apply a style depending on a particular logic you can use ngClass.
i.e. if you want to apply a style to your text when the button is disabled (so when
!cultivaresForm.valid) you can do something like this:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
<p [ngClass]="{text-behind: !cultivaresForm.valid}">the text you want to put behind</p>
You can then define the text-behind style in a separate CSS file.
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>
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>
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.
I am developing an ionic 2 app for android/iOS. I need to override the content description of a button when talkback feature is enabled in the device. I tried with alt and name options in button but nothing seems to be working.
<button ion-fab color="danger" (click)="share()" name="share" alt="Share" role="presentation">
<ion-icon name="md-share" ></ion-icon>
</button>
In order to override the default content description I specified the aria-label in button as shown below
<button click)="collapseDetails()" aria-label="Collapse">
<ion-icon [name]="icon_collapse" aria-hidden="true" item-left color="primary">
</ion-icon>
{{ displayName }}
</button>
In order to set the aria-label dynamically you can use
<ion-label attr.aria-label="{{display_name}} check the box to receive notifications" >{{display_name}} </ion-label>