Styling questions with input / label / button


1. Input / Label

I am trying to have the input for Postcode shifted to the right and aligned with the toggle switch. This is my code. Anyone know how to do that?

            <ion-label>Go for a walk</ion-label>
            <ion-toggle [(ngModel)]="Walk"></ion-toggle>
            <ion-input class="inputLocation" placeholder="Postcode"></ion-input>

I am shifting it to the right with custom css but is there a better way to do it?

    .inputLocation {
        .text-input {
            padding-left: 120px;

2. Input / Button

This is a picture from Airbnb on Android 4.4
How to achieve the same thing with Ionic2?
What other alternative would you prefer instead of this?


Question 1 got solved thanks to @MagicAardvark in slack with this change in the custom css.

.inputLocation {
    .text-input {
        text-align: right;

Anyone can help with question 2? Any pointers, hints or code sample would be really helpful ^^


There’s no default Ionic component that’s going to do number 2 for you with a simple cut and paste. I’d take a look at this section to learn how to leverage tap events to increase a counter like that one. The CSS itself should be pretty straightforward.


Thanks for the heads-up.

I have an idea for the css now. I was thinking about combining 2 round buttons but now I am leaning toward this solution: A div with custom borders having two small, clear buttons.


You’re starting to get on the right track now, feel free to post what you come up with and I’ll let you know what you can do to fix it.


hye, who know how to make ion-label of Kg and m in ion-input at the right side?
it should be like this:

Weight: Kg
Height: m