At this moment ion combox is in front of ion label in the middle.
I want to put text on top and combobox selection below:
Is this possible on ionic 2?
EDIT:
HTML code follows Ionic API Documentation:
<ion-item>
<ion-label>Align on Top</ion-label>
<ion-select [(ngModel)]="align">
<ion-option value="t">top</ion-option>
<ion-option value="m">middle</ion-option>
</ion-select>
</ion-item>
You can add this in .SCSS page and adjust values as needed
.select-md .select-icon,.select-ios.select-icon {
position: absolute;
width: 12px;
height: 19px;
left: 15px;
top: 26px;
}
and change the label to stacked
<ion-label stacked>Align on Top</ion-label>
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>
So far I have implemented buttons i.e (ion-fab) but the button labels can only be placed on top or bottom of the buttons. I want to place them on the left side of button. Image attached for more clarification.
HTML CODE
<ion-content>
<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div>
</ion-content>
<ion-fab right bottom #fab>
<button ion-fab (click)="openFabButton()">
<ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<ion-label class="fablabelfriend">Friend</ion-label>
<button ion-fab>
<img src="assets/family_add.png">
</button>
<ion-label class="fablabelfamily">Family</ion-label>
</ion-fab-list>
</ion-fab>
Css File
.fablabelfamily
{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 75px;
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
}
.fablabelfriend{
position: absolute;
width: 100%;
padding-right: 220px;
padding-bottom: 30px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}
#ListBackdrop{
background-color: white !important;
position: fixed !important;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.8
}
TypeScript File
export class myClass{
fabButtonOpened: Boolean;
constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
this.fabButtonOpened=false;
//All other functions inside constructor
}
openFabButton(){
if(this.fabButtonOpened==false){
this.fabButtonOpened=true;
}else{
this.fabButtonOpened=false;
}
}
}
Anu's answer worked for me but the labels prevented me from clicking on my buttons.
I made the following edit to fix this. The overlaps the buttons on top since the labels positions are fixed.
<ion-fab-list side="top">
<ion-label class="fablabelfriend">Friend</ion-label>
<ion-label class="fablabelfamily">Family</ion-label>
<button ion-fab>
<img src="assets/friend_add.png">
</button>
<button ion-fab>
<img src="assets/family_add.png">
</button>
</ion-fab-list>
</ion-fab>
Adding more to above fixes. You can make the labels clickable by
button[ion-fab] {
ion-label {
pointer-events: auto;
}
}
How to add text over the image in ionic1 slides
i need to display the text over image in the ionic slide. what should be stylesheet value for the text i need to set?
here is title property.
.slide-title {
margin-top: 2.8rem;
}
and here is the image property
.slide-image {
max-height: 100%;
max-width: 100%;
margin: 18px 0;
}
and here is the code for displaying slides
<ion-slides pager>
<ion-slide *ngFor="let slide of slides">
<ion-toolbar>
<ion-buttons end>
<button ion-button color="primary">Skip</button>
</ion-buttons>
</ion-toolbar>
<img [src]="slide.image" class="slide-image" width="100%" height="100%"/>
<h2 class="slide-title" [innerHTML]="slide.title"></h2>
<p [innerHTML]="slide.description"></p>
</ion-slide>
<ion-slide>
<ion-toolbar>
</ion-toolbar>
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
<h2 class="slide-title">Ready to Play?</h2>
<button ion-button large clear icon-right color="primary">
Continue
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-slide>
</ion-slides>
</ion-content>
2 ways to do this:
Setting the image as background-url to the outermost container. And then specify the title and other things in this container.
Outermost container will have position: relative. Have your image <img/> inside this container. All other inner containers (title and etc), will have position: absolute; and then actual position accordingly. Like top: 5%; left: 5%;
I have tried both the solutions in my app in the past. Both works. Not tried with your code though. Let me know about specifics if you need.
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>