CODEWITHSUNDEEP
htmlcssionic3
Riddhi Shah
Riddhi Shah

Reputation: 3122

How to decrease width of the ion-item which contains input

I want to decrease the width of the item/input. But I don't know how to do it!

Here's the code.

<form #loginForm="ngForm" autocomplete="off">
    <ion-item color="calm" class="fields rounded-corners">
        <ion-icon name="person" item-left color="light"></ion-icon>
        <ion-input placeholder="Email" name="username" id="loginField" type="text" [(ngModel)]="username" #email>
        </ion-input>
    </ion-item>

    <ion-item color="calm" class="fields rounded-corners">
        <ion-icon name="lock" item-left color="light"></ion-icon>
        <ion-input placeholder="Password" name="password" id="passwordField" type="password" [(ngModel)]="password">
        </ion-input>
    </ion-item>

    <ion-row>
        <ion-col text-center>
            <div *ngIf="error" class="alert alert-danger">{{error}}</div>
                <button ion-button class="submit-btn rounded-corners" text-center text-Capitalize type="submit">Login
                </button>
        </ion-col>
    </ion-row>
</form>

And CSS:

.fields{
   margin-top: 15px;
   margin-bottom: 15px;
   //  margin-left: 15px;
  //  margin-right: 15px;
 }

I have also tried it by using left and right margin but it seems like right margin is not applying somehow. Please help me as I am new to ionic and Html/css.

Edit

As seen in the image email and password inputs are having full screen width. I want to decrease the width of email and password input.

enter image description here

Upvotes: 4

Views: 10377

Answers (3)

Suraj Libi
Suraj Libi

Reputation: 515

try this..

.item {
    min-width: 3rem; /* <- this can be whatever you need */
}

Upvotes: 0

Sujan Gainju
Sujan Gainju

Reputation: 4769

you can use default css/scss classes to apply an effect to the <ion-input> For Example:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="container">
    <ion-list>
      <ion-item id="rounded">
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" value=""></ion-input>
      </ion-item>    
    </ion-list>
  </div>
</ion-content>

and in scss file add following styling

   #rounded {
        width: 50%;  // as per your requirement
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 10px;
        margin-bottom: 10px;  
    }

    #container {
        width: 300px; 
        margin-left:auto; 
        margin-right: auto; 
    }

Upvotes: 0

Riddhi Shah
Riddhi Shah

Reputation: 3122

I solved it by using max width.

What I added is max-width: 80% !important; followed by 2 lines to place it in centre only.

margin-left: auto;
margin-right: auto;

so finally, it becomes 

.fields{
   margin-top: 15px;
   margin-bottom: 15px;

   max-width: 80% !important;
   margin-left: auto;
   margin-right: auto;
 }

Upvotes: 6

Related Questions