I want the first list not to scroll we you can with the attribute no-bounce. Now the second list is not even showing up. I want that list to appear at the bottom with an Y-scrolll.
<ion-header>
<ion-navbar>
<ion-title>Calendar</ion-title>
<ion-buttons end>
<button ion-button icon-only clear padding>
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content no-bounce>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/avatar-finn.png">
</ion-avatar>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/avatar-finn.png">
</ion-avatar>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
</ion-list>
</ion-content>
I think you need something like this leveraging ion-scroll:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-scroll scrollX="false" scrollY="false" style="width: 100%; height: 50%">
<ion-list>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
</ion-list>
</ion-scroll>
<ion-scroll scrollX="false" scrollY="true" style="width: 100%; height: 50%">
<ion-list>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
<ion-item>
<h2>Finn</h2>
<h3>Don't Know What To Do!</h3>
<p>I've had a pretty messed up day. If we just...</p>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
Each ion-scroll component has controls over the scrolling directions and also you need to set width/height for this element.
Just like you can see in the Docs:
Scroll
ion-scroll
Scroll is a non-flexboxed scroll area that can scroll horizontally or
vertically. ion-scroll can be used in places where you may not need a
full page scroller, but a highly customized one, such as image scubber
or comment scroller.
Usage
<ion-scroll scrollX="true">
</ion-scroll>
<ion-scroll scrollY="true">
</ion-scroll>
<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>
Input Properties
Attr Type Details
------- ------- ----------
maxZoom number Set the max zoom amount.
scrollX boolean If true, scrolling along the X axis is enabled.
scrollY boolean If true, scrolling along the Y axis is enabled; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
zoom boolean If true, zooming is enabled.
Related
I am using ionic framework. The following code make the buttons align left. I would like to make the buttons align center. How can I do that ? Thanks
<ion-list>
<ion-item><button ion-button (click)="gotoPage1();">Go page 1</button></ion-item>
<ion-item><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
The current answer (Ionic 4) requires that in addition to using text-center, your wrap the buttons in a label. This works correctly:
<ion-list>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage1();">Go page 1</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage2();">Go page 2</ion-button>
</ion-label>
</ion-item>
<ion-item text-center>
<ion-label>
<ion-button (click)="gotoPage3();">Go page 3</ion-button>
</ion-label>
</ion-item>
</ion-list>
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
You can use ionic's text-center CSS Utility. See https://ionicframework.com/docs/theming/css-utilities/
Example Usage:
<ion-item text-center>
<button ion-button>click me</button>
</ion-item>
If you don't want the whole item content to be centered you can use css to center just the button.
e.g. wrapping the button with a text-center wrapper div inside the ion-item
Ionic Framework Center button within ionic item
I used this method
<ion-grid>
<ion-row>
<ion-col size="12" class="ion-text-center">
<ion-button>
Login
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
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'm creating a simple form with ionic 3 but I get a wrong focus position on the very first ion-input. Here is a screenshot of the problem :
You can see that the blue cursor is not positioned on the ion-input. But my code seems to be ok :
<ion-content padding>
<ion-list>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="username" placeholder="Your Username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Other Username</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="snap_username" placeholder="Your Other Username"></ion-input>
</ion-item>
</ion-list>
</ion-content>
Anyone knows a solution to this issue?
Seems like I found the solution.
If it can help someone, the issue disappeared after I installed the WKWebview plugin.
I have the following:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Add new</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="ion-backdrop" padding>
<form [formGroup]="form1" class="form" (ngSubmit)="onSubmit(form1.value)">
<ion-card>
<ion-list>
<ion-item>
<ion-label>Available:</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" formControlName="dateAvailableFormControl">
</ion-datetime>
</ion-item>
</ion-list>
</ion-card>
</form>
</ion-content>
and my ts code is:
this.dateAvailableFormControl.setValue(this.data.DateAvailable);
where this.data.DateAvailable is Date type.
I cannot see anything when page loads. All other bindings work fine except from the ion-datetime.
Does anyone knows why this happens?
Thanks in advance
I think I found what was the problem. Dont know if this is a bug of ionic 2 or is how it works with ng2.
My Date value was
2016-11-29T09:15:48.8579573Z
as soon as I change it to:
2016-11-29T09:15:48.857Z
it worked.
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.