Как уменьшить ширину ионного элемента, который содержит вход

Question

Я хочу уменьшить ширину элемента / ввода. Но я не знаю, как это сделать!

Вот код.

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

И CSS:

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

Я также пробовал использовать левое и правое поле, но кажется, что правое поле как-то не применяется. Пожалуйста, помогите мне, поскольку я новичок в ионных и HTML / CSS.

Редактировать

Как видно на картинке, адрес электронной почты и пароль имеют полную ширину экрана. Я хочу уменьшить ширину ввода адреса электронной почты и пароля.

Answer 1

Я решил, используя максимальную ширину.

То, что я добавил, это max-width: 80% !important; затем 2 строки, чтобы разместить его только в центре.

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

так, наконец, становится

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

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

Answer 2

Вы можете использовать классы css / scss по умолчанию, чтобы применить эффект к <ion-input> Например:

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

и в файле scss добавить следующий стиль

   #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; 
    }

Answer 3

попробуйте это ..

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