Two <ion-input> component in the line (ionic 3)

Ionic Framework ionic-v3
1

HI together,

I’m trying to a form without grid where you have 2 components on the same line. I would appreciate if you have some idea about that.

here is how I will like to have.

<ion-item-group>
	<ion-item>
		<ion-label>Mobile Number</ion-label>
                  <!-- 2 input tags suppose to show in the same line -->
		<ion-input placeholder="coountry code"/> - <ion-input placeholder="phone number"/> 
	</ion-item>
</ion-item-group>

Thanks

2

You could just manipulate the ion-input’s with a class and some basic CSS. Or wrap the inputs in an ion-row and both inputs inside a ion-col col-6.

1 Like
3

Thanks for you answer.

Do you know if ion-row & ion-col works in an ion-item. The last time I had tested nothing worked fine.

4

As far as I can tell it should jsut work fine. If it doesn’t, let me know.

5

Even if you do get this to lay out as you want, I think it’s going to be weird UX. I would stick with just having one input and parsing out the country code separately if you need it in the controller code.

6

What I would like is: user selects a country like “Germany” and the country code “+49” input “readonly” is filled automatically and user should enter only phone number “894755959”.
country code plus phone number need to be in the same line

1 Like
7

I have tried @luukschoen’s suggestion and successfully implemented it.

<ion-row>
        <ion-col col-3>
          <ion-item>
            <ion-label floating>Country Code</ion-label>
            <ion-input type="tel" value="+60" readonly> </ion-input>
          </ion-item>
        </ion-col>
        <ion-col col-9>
          <ion-item class="padding-left-2px">
            <ion-label floating>Enter Phone Number</ion-label>
            <ion-input type="tel" formControlName="phoneNumber">  </ion-input>
          </ion-item>
        </ion-col>
      </ion-row>

image

5 Likes
8

thanks for this the answer. Do you still have the code in git repos? so that you share with me.

Regards