I'm trying to add a fullscreen view but the notch area gets a white bar
page.html
<ion-content>
<ion-slides>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
<ion-slide>
<div/>
</ion-slide>
</ion-slides>
</ion-content>
how do I extend the background image to the notch area?
Add preference for staus bar
<preference name="StatusBarStyle" value="color" />
Related
Is it possible to select a slide to display with a focus on as the initial one? I have an array of items to display in Ionic slides, and I want to "preselect" (= put focus on the slide) based on preferences but keep the order.
I have read the Ionic documentation, but I am probably missing something. So far it looks I would need to use the slideTo function in the constructor of the page, but I was looking for a directive to use directly in the html template.
Thank you for any info.
.html
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
.ts
slideOpts = {
initialSlide: 2,
speed: 400
};
all the options are here http://idangero.us/swiper/api/
I want to scroll my ion-card component horizontally but it's not working that way. I've tried every resource on the internet but it's not scrolling horizontally.
Here is my code.
<ion-scroll scrollX="true" style="width:100% ; height:400px">
<ion-card nowrap *ngFor="let id of mydata" >
<img src="assets/imgs/arpit.jpg"/>
<ion-card-content>
<ion-card-title>
{{id.name}}
</ion-card-title>
<p>
{{id.regular_price}}
</p>
</ion-card-content>
</ion-card>
</ion-scroll>
The output I am getting is like the image below.
Try adding this styles is easy to do link
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 trying to create a card in my ionic 2 application, like this example from the documentation:
So I wrote this:
<ion-content padding>
<ion-card *ngFor="let item of myItems">
<ion-item id="card-header">
<ion-avatar item-start>
<img src="image_url" >
</ion-avatar>
<h2>Person name</h2>
<p>99/99/9999</p>
</ion-item>
<ion-card-content>
My content
</ion-card-content>
</ion-card>
</ion-content>
But what I'm getting is this:
As you can see the avatar is positioned on a full line, not on the same line as the person name and other line. Why my avatar icon is not beeing shown on the left side of the line?
I am using ionic Slide box and I want to disable for a user to slide between content horizontally using $ionicSlideBoxDelegate.enableSlide(false);
but this means i cant scroll vertically with the content. How do I work around this.
Use ion-content scroll == true inside ion-slide
<ion-slide-box show-pager="false" on-slide-changed="yourfunction()" does-continue="false" auto-play="false" slide-interval="100" >
<ion-slide>
<ion-content scroll="true">
your first slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your second slide
</ion-content>
</ion-slide>
<ion-slide>
<ion-content scroll="true">
your third slide
</ion-content>
</ion-slide>
</ion-slide-box>