How can I move the select to the left?

Ionic Framework ionic-v3
1

Hey guys,

I’m developing an app where you have to create an account. On the signup page I have a select for the phone country codes and as you can see it’s the only item on the right side:

image

But I want the select on the left side like all the textfields above and below, so I tried some css but it didn’t work for me. Here is a snippet of my code:

<!--Third row for the phone number prefix-->
          <ion-row>

            <!--Phone number prefix select in a column-->
            <ion-col>

              <!--The select-->
              <ion-item>
                <ion-label *ngIf="prefixValid == false" color="danger"><ion-icon name="close-circle"></ion-icon></ion-label>
                <ion-label *ngIf="prefixValid == true" color="secondary"><ion-icon name="checkmark-circle"></ion-icon></ion-label>
                <ion-label *ngIf="prefixValid == undefined"><ion-icon name="globe"></ion-icon></ion-label>
                <ion-select placeholder="Select country" name="prefix" [(ngModel)]="prefix" style="max-width: 100% !important;" required><!--style="max-width: 100% !important;padding-right: 75px;"-->
                  <ion-option *ngFor="let numPrefix of prefixes" value="{{numPrefix.dial_code}}">{{numPrefix.name}} ({{numPrefix.dial_code}})</ion-option>
                </ion-select>
              </ion-item>

            </ion-col>

          </ion-row>

          <!--Fourth row for the actual phone number-->
          <ion-row>

              <!--Textfield for the phone number in a column-->
              <ion-col>

                <ion-item>
                  <ion-label *ngIf="phoneValid == false" color="danger"><ion-icon name="close-circle"></ion-icon></ion-label>
                  <ion-label *ngIf="phoneValid == true" color="secondary"><ion-icon name="checkmark-circle"></ion-icon></ion-label>
                  <ion-label *ngIf="phoneValid == undefined"><ion-icon name="call"></ion-icon></ion-label>
                  <ion-input type="tel" name="phone" [(ngModel)]="phone" placeholder="Phone" (input)="validatePhone()" minLength="6" required></ion-input>
                </ion-item>

              </ion-col>

          </ion-row>

Thank you for your help,

Felix

2

Something like this… but it will affect all labels so you will have to customise it.

ion-label{
    -webkit-flex: none!important; 
    flex: none!important; 
}
2 Likes
3

Thank you so much!! You really helped me