I want to insert a slider just below the header(inside the ion-content). But I'm getting white space from the top, left and right as shown in the figure.
My HTML code for the slider is
<ion-navbar color="river">
<ion-row>
<ion-col width-10 style="text-align: right">
<button ion-button icon-only (click)="shop();" color="yel" clear end>
<ion-icon name="cart"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: center">
<button ion-button icon-only (click)="product();" color="yel" clear end>
<ion-icon name="pricetag"></ion-icon>
</button>
</ion-col>
<ion-col width-10 style="text-align: left">
<button ion-button icon-only (click)="feedback();" color="yel" clear end>
<ion-icon name="md-chatbubbles"></ion-icon>
</button>
</ion-col>
</ion-row>
how can I avoid white space in between the header and the slider?
May be your ion-content like this <ion-content padding></ion-content>, Remove the padding and try . <ion-content></ion-content>
Related
when i click home in a menu, there is used [this.navCtrl.setRoot(homepage);].
in that page it does not display menu button.
actullay this is my home page:
when i set setroot for homepage it shows like this
Html code in header:
<button ion-button menuToggle style="margin-top: 10px;" >
<ion-icon name="menu" style="color: white;"></ion-icon>
</button>
menu code:
<ion-menu [content]="mycontent" type="overlay"> <ion-content>
<ion-list class="nobottomborder">
<ion-item (click)="dashboard()">
<ion-icon ios="ios-home" md="md-home" class="sidebaricon"></ion-icon>
Home
</ion-item>
<ion-item (click)="addcart()">
<ion-icon ios="ios-cart" md="md-cart" class="sidebaricon"></ion-icon>
My Cart
</ion-item>
<ion-item (click)="orders()">
<ion-icon ios="ios-list-box" md="md-list-box" class="sidebaricon"></ion-icon>
My Orders
</ion-item>
<ion-item (click)="logout()">
<ion-icon ios="ios-exit" md="md-exit" class="sidebaricon"></ion-icon>
Logout
</ion-item>
<ion-item class="powered">
Powered by
<ion-row>
<img src="assets/imgs/logo.png" alt="logo">
</ion-row>
</ion-item>
</ion-list> </ion-content>
</ion-menu>
I have added like below and it is working great(I have homepage root initial) :
Home:
<ion-navbar>
<button menuToggle ion-button>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
I want to add a grayspace of between header and the first card starting.
And want to remove the line highlighting on the card's top area in the screen, I have mentioned it the screenshot provided.
.html
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</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-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
enter image description here
Add the bottom-border in the header.
ion-header {
border-bottom: 10px solid gray;
}
In ionic is having background white
You can change background in
<ion-header>
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content style="background:lightgray;">
<ion-card>
<ion-item>
<ion-avatar item-start>
<img src="img/marty-avatar.png">
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="img/advance-card-bttf.png">
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</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-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-col>
<ion-col center text-center>
<ion-note>
11h ago
</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
and change header
<ion-header style="border-bottom: 5px solid gray;">
<ion-toolbar>
<img>
<ion-title>Ion Cards</ion-title>
</ion-toolbar>
</ion-header>
I need to show a corresponding button to my string value in JSON.
I tried to use ng-show but I see every button on my site.
<ion-col ng-show="channels.fields.status == 'on'" col-sm-1 class="verse">
<button ion-button color="secondary" class="big_on"> On </button>
</ion-col>
<ion-col ng-show="channels.fields.status == 'off'" col-sm-1 class="verse">
<button ion-button color="light" class="big_off"> Off </button>
</ion-col>
<ion-col ng-show="channels.fields.status == 'error'" col-sm-1 class="verse">
<button ion-button color="danger" class="big_error"> Error </button>
</ion-col>
Change ng-show to ng-if
Try Following code,
<ion-col ng-if="channels.fields.status == 'on'" col-sm-1 class="verse"><button ion-button color="secondary" class="big_on">On</button></ion-col>
<ion-col ng-if="channels.fields.status == 'off'" col-sm-1 class="verse"> <button ion-button color="light" class="big_off">Off</button> </ion-col>
<ion-col ng-if="channels.fields.status == 'error'" col-sm-1 class="verse"> <button ion-button color="danger" class="big_error">Error</button> </ion-col>
I haven't used ionic 2 but as far as I know, "ion-col" is part of ionic 2 which uses Angular2.
Try using *ngIf instead of ng-show. For example:
<ion-col *ngIf="channels.fields.status == 'on'" col-sm-1 class="verse <button ion-button color="secondary" class="big_on">On</button></ion-col>
I want to display name="ios-navigate" (which is showing as a navigation icon in bellow image) right side in the column partition. I have given item-right attribute to the button element inside 'ion-col' but its not working.
Its currently displaying bellow,
<ion-item>
<ion-row>
<ion-col width-33>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear item-right (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col width-33>
<button ion-button icon-left clear item-right [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col width-33>
<button ion-button item-right icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-item>
Check out the latest ion-grid API based on flexbox. width-* is deprecated for col-*. Also item-left and item-right attributes work for ion-item elements.
You need to use row attributes.Try justify-content-end to align horizontally right.
<ion-row justify-content-end>
<ion-col col-4>
<button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear (click)="RedirectWebsite(item.Website)">
<ion-icon name="md-globe" item-left large></ion-icon>
WWW
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear [disabled]="!item.Phone" (click)="dialNumber(item.Phone)">
<ion-icon name="md-call" color="primary" item-left large></ion-icon>
Phone
</button>
</ion-col>
<ion-col col-4>
<button ion-button icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)">
<ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon>
</button>
</ion-col>
</ion-row>
I created a navbar like this:
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button (click)="goHome()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
The problem is that the Home button is showing with some strange grey background like in the image below:
I'm using Ionic2 RC3
How can I fix it?
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button ion-button icon-only item-right (click)="goHome()">
<ion-icon name="home" ></ion-icon>
</button>
</ion-buttons>
</ion-navbar>