I have a col with image as follows:
<ion-col *ngIf="i < items?.length">
<ion-thumbnail item-left (click)="clicked()">
<img width="100px" height="150px" src="somevalue" />
</ion-thumbnail>
<h6>{{ items[i].dealTitle }}</h6>
<p><ion-badge color="danger">{{ items[i].somevalue }} days left</ion-badge></p>
<p>Like this deal</p>
</ion-col>
I have ion-thumbnail clickable as I have a function in my component as follows:
clicked(){
}
I want to pass some id to clicked function. How can I achieve that?
I did a mistake. I removed {{}} in (click)="clicked({{id}})".
Related
I am not an expert in Bootstrap 3. It was my first time to use the widget "datepicker". I have two date pickers that need to be displayed inline to each other. When I try a normal input it works but if it is a date picker it goes a little far at the bottom. I tried the position relative however it did not resolve the issue. See screen shot attached.Date picker goes at the bottom
Hope some one can give me some light. Below is my code.`
<div class="horiz-search-bar-wrapper">
<form class="form-inline">
<div class="form-group">
<label><strong>Search</strong></label>
</div>
<div class="input-daterange">
<div class="form-group rel-position-date">
<label>Check-In:</label>
<div class="input-group input-append date" id="from">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<div class="form-group rel-position-date">
<label>Check-Out</label>
<div class="input-group input-append date" id="to">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group mar-left">
<button type="button" class="btn btn-primary">
Submit
</button>
</div>
</form>
</div>
`
Just an update to this, we were able to fixed the issue by replacing the <label></label> tag to <span></span>. The bootstrap datepicker adds top pixels when it sees more than 1 label.
Hope this could help the others.
I was also seeing issues with the Datepicker appearing too low. Whether the targeted element was toward the top or bottom of the viewport and the Datepicker was respectively orienting itself above or below the element, I was seeing a Datepicker appear "too-low."
Stumbled on to a fix with some JavaScript hackery bound to the DP's "show" event/hook.
Note the use of the native Boostrap CSS utility classes datepicker-orient-top and datepicker-orient-bottom.
$('#DateOfBirthForEditing').datepicker().on("show", function (e) {
var refDatePicker = $('div.datepicker.datepicker-dropdown');
var refDatePickerField = $('#DateOfBirthForEditing');
var fieldPositionTop = refDatePickerField.offset().top;
var dpModalTopOffset = 0;
if (refDatePicker.hasClass('datepicker-orient-top')) {
dpModalTopOffset = fieldPositionTop - 255;
} else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
dpModalTopOffset = fieldPositionTop + 30;
}
refDatePicker.css({ "top": dpModalTopOffset });
});
I am using ionic2.
Here is my template
<ion-slides autoplay="5000" loop="true" speed="500" pager="true">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
It's work perfect.But i need loop does not continue on when last slide.
How can i do this.
Kindly advice me,
Thanks
So i used some of the helper functions on the ionic 2 documentation for sildes.
The (ionSlideDidChange)="slideChanged()" handles the slides autoplay, so when the slide reaches 3 which is your maximum, i stop the autoplay using this.slides.stopAutoplay();.
The html is as:-
<ion-slides autoplay="5000" loop="true" speed="500" pager="true" (ionSlideDidChange)="slideChanged()">
<ion-slide class="slider1">
<h1>My <span>Neighbours</span></h1>
<p>My Neighbours is a directory of people who live in the building and have chosen to</p>
<div class="homepeople">
<div class="home"></div>
<div class="people"></div>
</div>
</ion-slide>
<ion-slide class="slider2">
<h1>CCTV <span>Monitoring</span></h1>
<p>Residents/Managers can view selected CCTV</p>
<div class="iconholder">
<img src="./assets/images/white CCTV Monitoring.svg" alt="Image">
</div>
</ion-slide>
<ion-slide class="slider3">
<h1>Emergency</h1>
<p>Security / Reception / Police / Ambulance / Fire</p>
<div class="iconholder">
<div class="iconholder-blk">
<img src="./assets/images/white emergency icon.svg" alt="Image">
</div>
<div class="iconholder-blk">
<img src="./assets/images/white Alarm.svg" alt="Image">
</div>
</div>
<button ion-button outline small (click)="navHome()">
Start using the app
</button>
</ion-slide>
</ion-slides>
The ts is as:-
export class HomePage {
#ViewChild(Slides) slides: Slides;
constructor() {
}
slideChanged() {
let currentIndex = this.slides.getActiveIndex();
if(currentIndex==3){
this.slides.stopAutoplay();
}
}
Hope this helps.
You can have a configuration for an Ionic Slide
Complete Source: Link
HTML
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="../../assets/images/{{s.id}}.jpg">
</ion-slide>
</ion-slides>
Component
With AutoPlay Set to true
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true
};
I am having a little challenge trying to re-position an icon in an ion-card header to the right. Check my code samples and pictures below.
this is my code
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
but the picture below shows what i would love to achieve
I finally figured out the ultimate solution. It is just adding style="float:right;"
...
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span style="color:blue">{{account.title}}</span>
<ion-icon style="float: right;" (click)="takeAction(account.$key)" name="more">
</ion-icon>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
Notice how I placed the ion-header contents into an ion-item element
You could try using ion-row and ion-col with col-{width}.
<ion-card-header>
<ion-row justify-content-between>
<ion-col col-11>
<span item-left>{{account.title}}</span>
</ion-col>
<ion-col col-1>
<span item-right><ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon></span>
</ion-col>
</ion-card-header>
They are both components of ion-grid which works similar to the grid layout of bootstrap.
Use a div container and pull that div to right. HTML should look like below:
<ion-card *ngFor="let account of Accounts">
<ion-card-header>
<span item-left>{{account.title}}</span>
<span item-right>
<div class="pull-right">
<ion-icon (click)="takeAction(account.$key)" name="more"></ion-icon>
</div>
</span>
</ion-card-header>
<ion-card-content>
<h5>Bank: <b>{{account.bank}}</b></h5>
<h5>Ac name: <b>{{account.acname}}</b></h5>
<h5>Ac name: <b>{{account.acno}}</b></h5>
</ion-card-content>
In CSS add following:
.pull-right {
float: right;
}
You could also use the popular flexbox module. Just add the following 2 CSS properties to the parent element.
<ion-card-header>
<div style="display: flex; justify-content: space-between;">
<h1>Left Content</h1>
<ion-icon name="more"></ion-icon>
</div>
...
</ion-card-header>
Here you can find another tutorial about flexbox with a good explanation and some nice, visual appealing examples.
The snippet above results in something like this:
<ion-card>
<ion-card-header>
<ion-card-subtitle color="primary">Subtitle</ion-card-subtitle>
<ion-card-title>
Title
<ion-icon color="primary" style="float:right" name="arrow-back"></ion-icon>
</ion-card-title>
</ion-card-header>
<ion-card-content>
This is some card content
</ion-card-content>
</ion-card>
I want the <ion-select> of a ionic form to look like a <button>.
Here is my html template:
<form (ngSubmit)="doSubmit()" [formGroup] = "myForm" >
<ion-item>
<!-- <button ion-button block> -->
<ion-select type="text" formControlName="choose" placeholder = "choose">
<ion-option value=1>option 1</ion-option>
<ion-option value=2>option 2</ion-option>
</ion-select>
<!-- </button> -->
</ion-item>
// ... other input fields + doSubmit() function ...
</form>
As it is, it works and I can manage the selection. But I want it to look like a button. So I added some tag <button ion-button block></button> around the <select> tags. If the <button> tags are uncommented, it does not work: It does not show as a button and the select functionnaly is dead. Also I naively expected it would execute as I had wished it, but it doesn't.
Has anyone an idea?
I have the following layout
<!-- Page Content -->
<ion-content class="app-page card-list">
<!--
-->
<ion-searchbar
[(ngModel)]="searchinput"
(ionInput)="onInput(search)"
placeholder="Search Contacts" light #search>
</ion-searchbar>
<!-- Refresher -->
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<!-- Contact List Start Here -->
<ion-list>
<!-- Foreach Contact in Contacts do -->
<button ion-item *ngFor="let contact of contacts" (click)="getContact(contact.id)" >
<ion-avatar item-left>
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,' + contact.image_small)" *ngIf="contact.image_small"/>
<img src="img/nopic.png" text-center *ngIf="!contact.image_small"/>
</ion-avatar>
<h2>{{contact.name}}{{contact.parent_id? ", " + contact.parent_id[1] : ""}}</h2>
<p><b>Mobile: </b>{{contact.mobile || "" }} <b>Phone: </b>{{contact.phone || "" }} <b>Email: </b>{{contact.email || ""}} </p>
</button>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed><ion-icon name="add"></ion-icon></button>
<!-- Infinite Scroll -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</ion-content>
<!-- Add new contact floating button -->
The problem that I face is that when I pull down the refresher, my bottom left floating button does not stay at the bottom.
I've even place the button out of ion-list, it does not help to keep the button at bottom.
You should use FAB outside the ion-content. The best way is create ion-footer and add FAB to it.
<ion-content>
...
</ion-content>
<ion-footer>
<button (click)="newContact()" fab fab-bottom fab-right fab-fixed>
<ion-icon name="add"></ion-icon>
</button>
</ion-footer>