Уменьшение ширины ion-select (Ionic v3)

Question

Я хочу ion-select и ion-input в одной строке с шириной, как показано ниже:

ion-select 10% width

ion-input 10% width 

Я написал для этого следующий код ( Stackblitz ):

  <div style="display: flex">
      <ion-item style="width:10%">
        <ion-label>+2</ion-label>
        <ion-select>
          <ion-option value="1">+1</ion-option>
          <ion-option value="2">+2</ion-option>
          <ion-option value="3">+3</ion-option>
        </ion-select>
      </ion-item>

      <ion-item  style="width:90%">
        <ion-input [value]="23321312321"></ion-input>
      </ion-item>

  </div>

Но, к сожалению, после этого текст выбора ионов исчезает.

Как мне этого добиться.

Answer 1

Вы можете использовать свойство width / max-width , чтобы задать для ion-item width значение 10%.вам нужно добавить ! важный , поскольку ионный элемент уже имеет свой стиль по умолчанию, поэтому для перезаписи стиля нам нужно сделать наш стиль важным .

максимальная ширина: 10%! важно;

ширина: 10%! важно;

Пожалуйста, проверьте ниже код:

<div style="display: flex">
      <ion-item style="max-width: 14% !important;">
        <!-- <ion-label>+2</ion-label> -->
        <ion-select style="max-width: 100% !important;">
          <ion-option value="1">+1</ion-option>
          <ion-option value="2">+2</ion-option>
          <ion-option value="3">+3</ion-option>
        </ion-select>
      </ion-item>

      <ion-item  style="max-width: 84% !important;">
        <ion-input [value]="23321312321"></ion-input>
      </ion-item>

  </div>

  <div>hello</div>

Настройте Ион-элемент ширина согласно вашему требованию.

Надеюсь, это поможет.