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

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-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"/> 


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

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.

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

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.

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

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

        <ion-col col-3>
            <ion-label floating>Country Code</ion-label>
            <ion-input type="tel" value="+60" readonly> </ion-input>
        <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>



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