Styling questions with input / label / button

Ionic Framework ionic-v3
1

1. Input / Label

image

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-item>
            <ion-label>Go for a walk</ion-label>
            <ion-toggle [(ngModel)]="Walk"></ion-toggle>
        </ion-item>
        
        <ion-item>
            <ion-label>Location</ion-label>
            <ion-input class="inputLocation" placeholder="Postcode"></ion-input>
        </ion-item>

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
image
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?

2

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 ^^

3

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 http://ionicframework.com/docs/v2/components/#gestures to learn how to leverage tap events to increase a counter like that one. The CSS itself should be pretty straightforward.

4

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.

5

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.

6

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

tq.