I'm getting the ripple effect to fire on touch (scroll) and not on click like it should be (guessing). This is happening either on ion-ripple-effect tag or in an ionic tag that has the ripple effect by default (like ion-item).
Here is a snippet of my code using the ion-ripple-effect tag:
<ion-row class="dash ion-margin-top">
<ion-col size-xs="6" size-sm="4" size-md="3" *ngFor="let item of dash">
<div class="box shadow">
<div class="content ion-activatable" routerLink="{{item.route}}">
<ion-icon name="{{ item.icon }}" color="primary"></ion-icon>
<ion-label color="dark">{{ item.name }}</ion-label>
<ion-ripple-effect></ion-ripple-effect>
</div>
</div>
</ion-col>
</ion-row>
Does anyone have encountered this, and if so, knows who to solve it?
Thanks in advance.
Related
have divided my form into divs on one ionic html page want to display one at a time, navigate until submit any help, my form is somehow like this, the first should display by default but the other divs should be displayed on clicking next
<div id="formPart1">
<ion-row>
<label>select date</label>
<ion-input type="date" ng-model="date"></ion-input>
<button ion-button full ng-click="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2">
<ion-row>
<label>select date</label>
<ion-input type="name" ng-model="name"></ion-input>
</ion-row>
</div>
In this case, i suggest you to use ion-slides. Distribute form elements to the slides. and lock swipe on page load and only change to next slide on Next button click.
Do this to lock swiping
ionViewDidLoad() {
console.log('ionViewDidLoad ServicePage');
this.slides.lockSwipes(true);
}
and on Next button click
goToSlide(slideNo) {
this.slides.lockSwipes(false);
this.slides.slideTo(slideNo, 500);
this.slides.lockSwipes(true);
}
So, First of all you have to write the code like this
<div id="formPart1">
<ion-row>
<ion-label>select date</label>
<ion-input type="date" [(ngModel)]="date"></ion-input>
<button ion-button full (click)="showNext()">Next</button>
</ion-row>
</div>
<div id="formPart2" [hidden]="!YOUR_VARIABLE">
<ion-row>
<ion-label>select date</label>
<ion-input type="name" [(ngModel)]="name"></ion-input>
</ion-row>
</div>
in the show showNext() method you have to make the variable true, like this
showNext() {
this.YOUR_GLOBAL_VARIABLE = true
}
Hope this will help you !!!
I want to add an element outside of modal using Ionic2 like the image below.
The area surrounded by blue border is the element that I want to add.
The area surrounded by red border is the custom modal that I have created.
Custom Modal.html
<ion-header>
<ion-navbar class="select-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png"/>
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="region-selection">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</ion-content>
Try placing all your items inside the ion-content and remove the ion-header to have a structure like this
<ion-content class="region-selection">
<div class="outside-element">
<!--element outside of modal-->
</div>
<!--This is your modal header wrapper-->
<div class="modal-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png" />
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</div>
<!--This is your modal header wrapper-->
<div class="modal-content">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
Now you can use css to style and position the elements using the classes .outside-element , .modal-header , .modal-content
Also, make sure to set your background-color to transparent
I want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?
In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference
I have a fairly simple template for ion-item cards:
<ion-list>
<div class="card">
<ion-item ng-repeat="item in items"
item="item"
ui-sref="main.tabs.create({id: item.id})">
<div class="item item-avatar item-fill-space">
<img data-ng-src="data:image/jpg;base64,{{ item.image[0] }}" data-err-src="../../../../../res/icons/android/icon-48-mdpi.png">
<h2>{{ item.title }}</h2>
</div>
<div class="item item-body item-fill-space">
{{ item.message }}
</div>
</ion-item>
</div>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-list>
It's appearing like this on the screen:
The horizontal line in the middle isn't reaching the full width of the container (with respect to the margin on the opposite side). How can I fix this?
I've tried adding the class
.item-fill-space {
width: 100%;
}
but it doesn't work unless I specify a width of more than 100%, but that's a bit hacky.
I have the same problem, with a similar code:
<ion-view>
<ion-content>
<ion-list>
<ion-item ng-repeat="aviso in avisos | filter: filter" href="#/app/avisos/{{aviso.id}}">
<div class="item item-divider aviso">
<strong>{{aviso.create_date | dateFormat}}</strong>
</div>
<div class="item aviso">{{aviso.formated_message}}</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And, like DaveDev said, the only workaround solution is to use a width of more then 100% (in my case, 110% worked for the "aviso" class). But I'm not happy with this too.
'ion-content' comes with padding into it.
Try and see what happens when you take out that padding in your outer directive which contains your 'ion-list'.