CODEWITHSUNDEEP
htmlcssionic3
Zeyad Ali
Zeyad Ali

Reputation: 63

An Issue with ion-item tag

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

Answers (2)

Ahmed Hassan
Ahmed Hassan

Reputation: 36

try using min-width and max-width it will fix your problem

Upvotes: 2

B G Hari Prasad
B G Hari Prasad

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

Related Questions