Как выровнять заголовок, поле ввода и значок Ionic рядом друг с другом в Ionic 3

До сих пор мне удавалось выяснить, как выровнять заголовок по левому краю и значок выравнивания по правому краю, но проблема заключается в поле ввода в центре, которое я не могу понять.

Ожидаемый результат Изображение приведено ниже.

Ожидаемое выходное изображение Ionic 3

Код моей домашней страницы:

<ion-header>

  <ion-navbar>    
      <ion-title text-center>Page Title</ion-title>

    <ion-buttons end>
      <button ion-button icon-only>          
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

<ion-content padding>       

</ion-content>

ionic-framework ionic3 cordova-3
person Johne Doe    schedule 25.09.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Только что починил сам!

Домашний HTML-файл

<ion-header>

  <ion-navbar>
    <ion-title>Title
      <ion-input type="text"></ion-input>
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only>          
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>


<ion-content padding>


</ion-content>

Файл переменной.scss

$text-input-md-margin-top: 0px; 
$text-input-md-margin-bottom: 0px;
$text-input-md-margin-start: 0px;   
$text-input-md-margin-end: 0px;

Файл Home.scss

ion-input
{
    background-color: white;
    border-radius: 5px;      
    display: inline;
    color: black;
    margin-left: 0.5em;
}

.text-input-md
{
    width: 60%;    
}
person Johne Doe    schedule 25.09.2017