Reputation: 63
I am working on a Login page where the user chooses the country code then enters his phone number. The two input fields (code, phone number) are in one line together
The Problem I have is that when I use the ion-item it divide the width between the two input fields equally even if I change the width in the .scss file
I have been in this problem for 2 days and can't get it yet.
Here is my .scss file
ion-item{
margin-top:170px;
width: 100%;
}
.countryCode{
width:20%;
margin-right: 3px;
border:none;
border-bottom: 1px solid grey;
background-color: rgba(255,255,255,0.0);
}
.phoneNumber{
width: 50%;
margin-left: 3px;
border: none;
border-bottom: 1px solid grey;
background-color: rgba(255,255,255,0.0);
}
and here is my HTML file ion item tag
<ion-list>
<ion-item>
<ion-input class="countryCode" type="text" [(ngModel)]="countryCode" name="code" (tap)="openCountriescodePage()" placeholder="+">{{countryCode}}</ion-input>
<ion-input class="phoneNumber" type="text" [(ngModel)]="phoneNumber" name="phoneNumber"></ion-input>
</ion-item>
<button margin-top ion-button full color="success" (click)="login()">{{'login' | translate}}</button>
Thanks in advance :)
Upvotes: 2
Views: 49
Reputation: 178
Try using important,
ion-item{
margin-top:170px;
width: 100%;
}
.countryCode{
width:20%;
margin-right: 3px !important;
border:none;
border-bottom: 1px solid grey;
background-color: rgba(255,255,255,0.0);
}
.phoneNumber{
width: 50%;
margin-left: 3px !important;
border: none;
border-bottom: 1px solid grey;
background-color: rgba(255,255,255,0.0);
}
Upvotes: 0