I am trying to align two radio buttons in single row or horizontally in Ionic 3 as shown in below image.
html
<ion-item>
<ion-row radio-group >
<ion-col>
<ion-item>
Batch Medium
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>English</ion-label>
<ion-radio >English</ion-radio>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Bilingual</ion-label>
<ion-radio>Bilingual</ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-item>
After trying this code I am getting blank screen.
That's like verbose ugly :)
Here is my take
The Looks
or
The HTML
The CSS
The code behind
There is more tweaking you can do like with flexbox
The least you invest in any framework the better :)
Enjoy!
Tryout like below code.
<ion-row radio-group [(ngModel)]="batchmedium">
<ion-col>
<ion-item>
Batch Medium*
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label> English </ion-label>
<ion-radio value="English"></ion-radio>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label> Bilingual </ion-label>
<ion-radio value="Bilingual"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
review this link for more details http://plnkr.co/edit/AdFPOUaufyFYXqBxNiGg?p=preview
Related
This question was also asked here, but the solution was several years old and not well-suited for me since it's an earlier version of Ionic. I want to put City and State next to each other as an ion-input (with a floating label) and an ion-select (no label). Below is my HTML and the resulting display:
[![Result][1]][1]
<ion-row>
<ion-col size="8">
<ion-item lines="full">
<ion-label position="floating">City</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item lines="full">
<ion-select placeholder="State">
<ion-select-option [value]="st" *ngFor="let st of [{ name: 'Louisiana'},{name: 'Texas'}]">{{st.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>```
[1]: https://i.stack.imgur.com/q5Hqj.png
You can use ion-label with stacked position on your select options.
<ion-grid>
<ion-row>
<ion-col size="8">
<ion-item lines="full">
<ion-label position="floating">City</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item lines="full">
<ion-label position="stacked">City</ion-label>
<ion-select placeholder="State">
<ion-select-option [value]="st" *ngFor="let st of [{ name: 'Louisiana'},{name: 'Texas'}]">{{st.name}}
</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
I an making an app using Ionic and AngularJS. I made a page, but when I put this HTML on it it does not load to anything other than a blank screen. When I click on the navigation link in the sidemenu, nothing happens, and Ionic does not even try to load the page. I am probably missing something obvious, but help would be appreciated. Here is my ion-content:
<ion-content>
<ion-list>
<ion-item>
<ion-label>Happiness</ion-label>
<ion-range value="100">
<ion-label slot="start">ðŸ˜</ion-label>
<ion-icon slot="end">😀</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Fear</ion-label>
<ion-range value="100">
<ion-label slot="start">😬</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Anger</ion-label>
<ion-range value="100">
<ion-label slot="start">😡</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Stress</ion-label>
<ion-range value="100">
<ion-label slot="start">😰</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Energy</ion-label>
<ion-range value="100">
<ion-label slot="start">😴</ion-label>
<ion-icon slot="end">âš¡</ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>Worry</ion-label>
<ion-range value="100">
<ion-label slot="start">😟</ion-label>
<ion-icon slot="end">👌</ion-icon>
</ion-range>
</ion-item>
<ion-list>
<ion-button color="primary">Save</ion-button>
</ion-content>
Thanks in advance.
Your ion-list tag is not closed. Missed a / there.
I have 4 checkboxes. How do i get the values of those that are checked? What should i type in my typescript folder? I am trying to get the values so that i can save it into firebase. Here is my .html code.
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Bedrooms</ion-label>
<ion-checkbox [(ngModel)]="bedrooms" (ionChange)="updateBedrooms()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Toilet</ion-label>
<ion-checkbox [(ngModel)]="toilets" (ionChange)="updateToilets()">
</ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Living Room</ion-label>
<ion-checkbox [(ngModel)]="livingroom" (ionChange)="updateLivingRoom()"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Kitchen</ion-label>
<ion-checkbox [(ngModel)]="kitchen" (ionChange)="updateKitchen()">
</ion-checkbox>
</ion-item>
</ion-list>
<button (click)="onLoadTasks()" ion-button block>Choose Tasks<ion-
icon name="arrow-dropright"></ion-icon></button>
try this for the 4 ones
kitchen: boolean;
updateKitchen() {
console.log('new state:' + this.kitchen);
}
I have implemented a login page but the forms dont display the input area (lines)
This is what i have
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
<ion-list>
The above generates
I was lookingb forward to have
As you can see the input fields arent visible on the first image, What else do i need to add
Just check if you have included the .css files and referenced it in the index.html
<ion-navbar *navbar>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
<ion-content >
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-list>
</ion-content>
DEMO
Hi I already tried How to align ion-label to right, but this is not what I need. It is my first project in ionic 2 and java script, so i apologized if it is a stupid question.
I have a ion list:`
<ion-list >
<ion-item>
<ion-label floating>Company Name</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Bot name</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Bot Url</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
<ion-label>mydomain.com</ion-label>
</ion-item>
</ion-list>
`
What I got is this:
What I want is:
".myDomain.com" should be a ion-label fixed the user can only change "Audi" to another.
You just need to set and order like the example
.label-right{
order: 2
}
<ion-list>
<ion-item>
<ion-label floating>Bot Url</ion-label>
<ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
<ion-label class="label-right">mydomain.com</ion-label>
</ion-item>
</ion-list>