I am working on Ionic v2 and and facing issue in aligning ion-label value to the right. Following is the code snippet:
Html Code:
<ion-content padding class="home">
<ion-list>
<ion-item class="clearme">
<ion-label>Employee Name:</ion-label>
<ion-label class="alignme">Gaurav</ion-label>
</ion-item>
</ion-list>
CSS:
.home {
background-color: red;
}
.alignme {
float:right !important;
}
.clearme {
clear: both !important;
}
After adding these classes text is not getting aligned to right.
You can also use text-right attribute directive like below.
<ion-label text-right>Gaurav</ion-label>
For detail information about attribute directives, see here
Edit for Ionic 5
<ion-label class="ion-text-right">...</ion-label>
Just use text-align instead of float.
.alignme {
text-align: right;
}
Btw you should use ion-label only with forms - ion-input, ion-checkbox etc.
Ionic has a built-in solution for this:
Documenation
Version 2-3:
<ion-label ion-text-center>
Centered text
</ion-label>
Version 4+:
<ion-label class="ion-text-center">
Centered text
</ion-label>
If still not success try this
//html
<ion-item>
<ion-input type="text" placeholder="Username"></ion-input>
<ion-label class="alignme">
<ion-icon name="logo-playstation"></ion-icon>
</ion-label>
</ion-item>
//css
.alignme{
position:absolute;
right:0
}
in ionic 5 this worked for me.
<ion-item>
<ion-label slot="start">Left Side</ion-label>
<ion-label slot="end">Right Side</ion-label>
</ion-item>
Related
I have following code in Ionic 3. I have yes/no type radio button which are horizontally aligned. In android they are coming in center but in iOS thery are coming as right aligned. I want to make them center aligned for iOS as well. Following is the code:
<ion-card center>
<ion-card-header >
<ion-label >Q1. Are you a programming geek?</ion-label>
</ion-card-header>
<ion-row radio-group>
<ion-col width-30>
<ion-item>
<ion-label>Yes</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
</ion-col>
<ion-col width-30>
<ion-item>
<ion-label>No</ion-label>
<ion-radio value="0"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-card>
Following is the CSS which I have modified:
.input-wrapper{
flex: initial;
}
.card-md .item-md.item-block .item-inner {
border: 0;
justify-content: center;
}
I have done it by adding following code in css:
.card-ios .item-ios.item-block .item-inner {
border: 0;
justify-content: center;
}
I have the following code snippet, and I'm trying to create a menu on the top that is a list of icons and a label below each icon.
The label is in the center of each icon
The Icons should be in the same row
All the icons should be placed in the center of the ion-navbar
the ion-toolbar gives the same behavior as ion-navbar
ts
export class HomePage {
constructor(private nav: NavController) {
}
range(min, max, step) {
var input = [];
step = step || 1;
for (var i = min; i <= max; i += step) {
input.push(i);
}
return input;
}
}
html
<ion-header>
<ion-navbar>
<span >
<ion-label *ngFor="let i of range(1,5)">
<ion-icon name="home"></ion-icon>
Home
</ion-label>
</span>
</ion-navbar>
</ion-header>
<ion-content text-center>
Some page content
</ion-content>
Clean Plunker,
Worked-on Plunker
Tried to play around but couldn't get the result I need, and I've created the above plunker to have a clean env to play with ...
Any ideas ?
Use ion-grid. Plunker
HTML:
<ion-navbar>
<ion-grid>
<ion-row>
<ion-col text-center *ngFor="let i of range(1,5)">
<ion-label text-center>
<ion-icon name="home"></ion-icon>
Home
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-navbar>
CSS:
ion-label {
float: none;
}
.toolbar ion-row,
.toolbar ion-col,
.toolbar ion-grid {
padding: 0px;
}
.toolbar ion-label {
margin: 0px !important;
}
Was able to place them horizontally by adding the following CSS:
ion-label {
display: inline-block !important;
}
The key was the !important part, as the ion-label is being override by the size of the screen ( like .md ion-label etc .. this is why while playing with the Plunker I couldn't get the result I wanted.
Thanks #swapnil-patwa for the help !
If it helps, for Ionic 5 just add this property on ion-buttons inside the ion-toolbar:
flex-direction: column;
Example:
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon name="person-outline"></ion-icon>
</ion-button>
<ion-label>User</ion-label>
</ion-buttons>
</ion-toolbar>
I'm trying to align menu toggle icon to left and title to center of the header. I'm using the below code:
<ion-header>
<ion-toolbar color="primary">
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Home
</ion-title>
</ion-toolbar>
But the title doesn't appear in the centre. please help out. thanks in advance.
For android device you need to put this code
Using this code solved this issue for me.
page.html do this
<ion-header no-border-bottom>
<ion-navbar color="primary" class="home-nav">
<ion-title >Dashboard</ion-title>
<button ion-button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
app.scss file do this
ion-header button, .back-button {
position: absolute !important;
z-index: 5;
}
ion-title {
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
}
You just need to add the text-center directive to your ion-title or ion-toolbar or add class="ion-text-center"
<ion-header>
<ion-toolbar color="primary">
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-center>
Home
</ion-title>
</ion-toolbar>
</ion-header>
The problem can easily be solved by taking out the button from the content flow: set it's position to absolute which leaves the title as only child in it's parent normal flow. It will take up the entire width and get properly centered.
Something like:
ion-navbar button {
position: absolute !important;
}
You need to set the button within ion-buttons start.
Try:
<ion-header>
<ion-toolbar color="primary">
<ion-buttons start><!-- here -->
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
Toolbar docs
For ios mobile the title will automatically aligned center all you have to do is for android
<ion-header>
<ion-navbar color="primary">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
in your css do this
ion-title{
text-align: center;
}
if the above Sass is not applied the try this
ion-title.title.title-md {
text-align: center;
}
You should use left or right in ion-buttons because start and end doesnt work always
<ion-header>
<ion-toolbar color="primary">
<ion-buttons left><!-- here -->
<button ion-button menuToggle left>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
you can use css to center text please try this
html code
<ion-title text-center class="comman-title-text-right">Signup</ion-title>
add css
.comman-title-text-right{
margin-right: 60px;
}
How to delete the space between the line under the UPDATE INTERVAL and range itself?
my code:
<div class="range">
<ion-list>
<ion-list-header>
update interval
<ion-badge item-right>{{timePeriod}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range min="1" max="60" [(ngModel)]="timePeriod">
<ion-label range-left>1</ion-label>
<ion-label range-right>60</ion-label>
</ion-range>
</ion-item>
</ion-list>
</div>
And btw - is it ok to put elements inside the tag in Ionic2?
The ion-list-header element has a margin-bottom, so you can set it to 0 to remove it:
ion-list-header.list-header { margin-bottom: 0; }
I have a problem because I can't change the colour my ion-list.
My .html is like this:
<ion-header>
<ion-navbar>
<ion-title>
Contactos
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="telefonos" padding>
<ion-list class="MyList" >
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
<div align="center">
{{item.title}}
</div>
</button>
</ion-list>
</ion-content>
and my .scss in like this:
.MyList{
background-color: #58B43F;
color : #ffffff !important;
box-shadow : 0px 6px 10px #888888;
}
box-shadow work fine, but my list is still white and the letters black.
Somebody know what is the problem?
Thanks in advance.
Best regards.